前端初学者，目前是大三狗。 本专业不感兴趣，所有自学前端打算转行。 第一次写文章，请各位大佬多多指教。
刚看完htmlt与css基础部分，js还在学习中，做了一个小练习。
暂时没有截gif的软件，先用截图代替吧。 效果图就是这样：
步骤： 1.构建立体均匀分布的图片 2.使图片旋转
使用到的知识点： css部分： 1.transform 2.transform-style 3.perspective 4.transition 5.animation js部分： setInterval
transform属性:
transform: none|transform-functions;
复制代码Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
transform-style transform--style属性指定嵌套元素是怎样在三维空间中呈现。
transform-style: flat|preserve-3d;
复制代码这里我们需要用到的是perserve-3d 使用这个属性必需先使用transforn属性
perspective 这个属性是允许你改变3D视图的透视方式。 值越大距离眼睛月圆，值越小距离眼睛越近。
transition transition属性是一个速记属性有四个属性：transition-property, transition-duration, transition-timing-function, and transition-delay
transition: property duration timing-function delay;
复制代码-
transition-property指定CSS属性的name，transition效果 -
transition-durationtransition效果需要指定多少秒或毫秒才能完成 -
transition-timing-function指定transition效果的转速曲线 -
transition-delay定义transition效果开始的时候
animation animation和transition这两个属性我觉得我讲不清楚，大家还是自己去查一下吧。
首先定义一个div来存放图片
"wrap">
"photos">
![]()
"pic1" src="pic/3D/favorite1.jpg" alt="">
![]()
"pic2" src="pic/3D/favorite2.jpg" alt="">
![]()
"pic3" src="pic/3D/favorite3.jpg" alt="">
![]()
"pic4" src="pic/3D/favorite9.jpg" alt="">
![]()
"pic5" src="pic/3D/favorite5.jpg" alt="">
![]()
"pic6" src="pic/3D/favorite6.jpg" alt="">
复制代码设置css
*{
padding: 0px;
margin: 0px;
}
body{
background-color: black;
}
.wrap{
perspective: 1600px;
}
#photos{
width: 300px;
height:300px;
margin: 200px auto;
transform-style: preserve-3d;
transition: all .5s ease;
animation: spin 20s linear infinite;
}
img{
width: 250px;
height: 300px;
margin-bottom: 100px;
position: absolute;
border: 1px solid gray;
border-radius: 20px;
opacity: 0.8;
}
复制代码此时图片应该是都重叠在一起的，用js使图片立体分布均匀
首先 创建变量获得photos对象 存放photo下的img 获得img的长度
使图片立体分布均匀，这一步其实用css可以单独设置，但是重复工作太多，所以直接用js即可。 遍历phoNum，为其添加style 这里的rotate指的是以屏幕为面。水平向右为X轴，竖直向上为y轴，垂直屏幕向外为z轴，所以我们只需要设置y轴的值，即trotateY() 注意：我们添加的图片没有上面和底下的 如果设置为上下面也有图片，style需要单独在cssh中设置。我尝试添加了顶面，用js设置，但是没搞出来，如果有哪位大佬知道怎么弄，请指教。
var phoArr = document.getElementById("photos");
var phoNum = phoArr.getElementsByTagName("img");
var phoLen = phoNum.length;
var ang = Math.floor( 360/phoLen);
for(var i = 0; i < phoLen; i++){
phoNum[i].style = 'transform : rotateY(' + ang*i + 'deg) ';
}
复制代码此时应该是这样的效果：
使图片分散开，需要添加translateZ()， 这里设置translateZ为300
for(var i = 0; i < phoLen; i++){
phoNum[i].style = 'transform : rotateY(' + ang*i + 'deg) translateZ(300px) ';
}
复制代码这样图片就是均匀分散开的。
最后添加动画使图片动起来 使用@keyframes可以使图片动起来。 它是通过通过从一个样式过渡到另一个样式
具体的用法有很多，不一一细说了。
这里我只设置了水平方向的转动，即只设置了rotateY() 从0到360deg，正好为一圈 若设置了rotateX()则在竖直方向也会转动
@keyframes spin {
from {
transform: rotateY(0);
}
to {
transform: rotateY(360deg);
}
}
复制代码结束。
本文参考：
纯css 3D立方体动画特效 菜鸟教程css及js部分