【Animation】照片墙3D动画

一、效果图

Demo线上链接

二、实现过程

设计思路：每个元素独立互不影响，且沿着y轴自身旋转，他们旋转初始角度不同（平分360度），然后给他们设置一定z轴距离（可以理解为半径）

需要3级元素（2级也可以）

      

        //需要旋转个体对数量
        

        

        

    

1级元素关键样式

prespective：//设置元素被查看位置的视图，以像素为单位
prespective：800px ; // 可以理解为Z轴
perspective-origin: 50% -50%;  //perspective-origin: x-axis y-axis; X轴和Y轴
注: x,y轴正方向为0% ，负方向为100% ，顺时针递增 0%->50%->100%->-50%->0%。

注：要用3d立体空间来想象，这个属性是来确定你观察物体对正方向和观察距离，观察点（x,y,z)与原点（0,0,0)的连线方向为观察正方向

2级元素关键样式

transform-style: preserve-3d;  //子元素将保留其 3D 位置。ie浏览器不支持，这样不在平面上的个体也可以显示出来
position: relative;
animation: zoetrope 50s linear infinite;
@keyframes zoetrope {
  100% {
    transform: rotateY(360deg);
  }
}

3级元素关键样式
position: absolute;
width:100px;
height:100px;
left:calc(50% - 50px)

为什么不能使用left: 50%; transform:translateX(-50px)，因为这个相对的xyz坐标轴是静态的，所以整体只会向x轴负半轴便宜50像素，，因为2级元素是不断旋转的， left是相对2级元素的左边框定位，可以使得旋转整体围绕同一个点，动态定位。看下面图片。

$unit = 360 / 个数
.zoetrope div:nth-child(0) {
transform: rotateY(0deg) translateZ(440px);
}

.zoetrope div:nth-child(1) {
transform: rotateY($unit * 1deg) translateZ(440px);
}

.zoetrope div:nth-child(2) {
transform: rotateY($unit * 2deg) translateZ(440px);
}
rotateY 是每个元素都有自己的旋转初始角度
translateZ(440px) 沿着z轴 440px ，可以理解为半径440px；