css实现图片的3d旋转-照片墙-Toy模板网

这篇具有很好参考价值的文章主要介绍了css实现图片的3d旋转-照片墙。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一.效果图

css实现图片的3d旋转-照片墙

二.图片摆放

1.html

这里准备了1个section和7个div，7个div都要求定位在父元素section那里（都在中心点），每个div各一张图，上面效果图有1张在中间的，其余6张图要在周围

<section>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</section>

2.图片位置摆放-旋转

6个图片在周围，看起来就像个六边形，所以每个图都间隔60度，依次旋转就是（0° 60° 120° 180° 240° 300°）

section div:nth-of-type(1){
	transform:rotateY(0deg);
	background:url(DSC02240.jpg) no-repeat;
	background-size:220px 350px;
}
section div:nth-of-type(2){
	transform:rotateY(60deg);
	background:url(DSC02249.jpg) no-repeat;
	background-size:220px 350px;
}/*其余类似*/

记得给body加上3d透视效果 perspective:1450px（3d视觉效果）

还有section加上内嵌效果 transform-style:preserve-3d（所有子元素在3D空间中呈现）

2.图片位置摆放-旋转

css实现图片的3d旋转-照片墙

想象一下从上面往下看，此时图片就被内嵌在一起，像米字形一样，这时候需要让每个图片在z轴添加一个距离（旋转后方向已改变，图片正前方就是z轴的方向）

transform:translateZ(400px);

此时图片位置已经做完

css实现图片的3d旋转-照片墙

三.动画效果

让大盒子section 360度无限循环的转起来

@keyframes rotations{ 
	/* 添加动画效果 */
	0%{}
	100%{
		transform:rotateY(360deg);
	}
}

动画在赋予seciton文章来源地址https://www.toymoban.com/news/detail-461016.html

section{
	animation:rotations 10s linear infinite;    /*infinite:无限循环*/
}

四.代码展示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>view</title>
<style>
body{
	/*添加3d透视效果*/
	perspective:1450px;
	background-color:#000;
}

section{
	position:relative;
	margin:220px auto;
	width:220px;
	height:350px;
	animation:rotations 10s linear infinite;
	/*所有子元素在3D空间中呈现*/
	transform-style:preserve-3d;
}

section div{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}

/*先旋转在移动*/
section div:nth-of-type(1){
	transform:rotateY(0deg) translateZ(400px);
	background:url(DSC02240.jpg) no-repeat;
	background-size:220px 350px;
}
section div:nth-of-type(2){
	transform:rotateY(60deg) translateZ(400px);
	background:url(DSC02249.jpg) no-repeat;
	background-size:220px 350px;
}
section div:nth-of-type(3){
	transform:rotateY(120deg) translateZ(400px);
	background:url(DSC02308.jpg) no-repeat;
	background-size:220px 350px;
}
section div:nth-of-type(4){
	transform:rotateY(180deg) translateZ(400px);
	background:url(DSC02323.jpg) no-repeat;
	background-size:220px 350px;
}
section div:nth-of-type(5){
	transform:rotateY(240deg) translateZ(400px);
	background:url(DSC02345.jpg) no-repeat;
	background-size:220px 350px;
}
section div:nth-of-type(6){
	transform:rotateY(300deg) translateZ(400px);
	background:url(DSC02268.jpg) no-repeat;
	background-size:220px 350px;
}
section div:nth-of-type(7){
	background:url(DSC02746.JPG) no-repeat;
	background-size:220px 350px;
}

@keyframes rotations{ 
	/* 添加动画效果 */
	0%{}
	100%{
		transform:rotateY(360deg);
	}
}

section:hover{
	/* 鼠标放入动画即停止 */
	animation-play-state:paused;
}

section div:hover{
	box-shadow:0 0 38px #169FE6; /* 鼠标放入显示阴影 */
}
</style>
</head>
<body>

<section>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</section>

</body>

</html>

到了这里，关于css实现图片的3d旋转-照片墙的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！