如何做一个3D动画

本次做的是一个立方体，然后进行3d的旋转，这样给予用户立体的感觉
接下来开始html部分的构写，一个大的div，里面分为6个面，由于是做一个动画相册，我直接放了6张图片

Css样式：设置宽高，然后重点是外层的盒子要加上一个重要的属性：
transform-style: preserve-3d;
这样接下来才有一个3d的效果，给6张图片一个定位：position: absolute;这样图片就全部集中在一块，堆在div这个大盒子中，接下来便是改变其位置，设置四边的图片，让其中四边的图片垂直，并且是分四边
.img1{
z-index: 5;
transform-origin: top;
transform: rotateX(90deg);
}
.img2{
z-index: 4;
transform-origin: left;
transform: rotateY(-90deg);
}
.img3{
z-index: 3;
transform-origin: right;
transform: rotateY(90deg);
}
.img4{
z-index: 2;
transform-origin: center bottom;
transform: rotateX(-90deg);
}

这样完成了大部分，还有一张图片需要立起来
.img5{
z-index: 1;
transform: translate3d(0,0,200px);
}
给它一个3d的升起，这样一个立方体就做好了，接下来便是一个动态的旋转效果，这样便有一个直观的看法，不然没有动起来这个3d的效果便无法展示
@keyframes ani{
100%{
/x轴在电脑屏幕水平向右,y轴在电脑屏幕垂直朝下，z轴垂直电脑屏幕指向你/
transform:rotate3d(1,1,0,360deg);
}
}
然后便是调用，在外层的div盒子调用
animation: ani 5s infinite forwards linear;
动画名+时间（5秒）+无限次运动+当动画完成后，保持最后一个属性值+匀速运动；
最后完成效果如下，静态图片：