如何用CSS动画特效让图片旋转起来

杜老师逆战班学员 2020.02.22
我们通常浏览网页，基本上看过去都是呈现着各种文字加图片的2D效果信息，作为一名前端开发工程师非常重要的工作就是要让用户看到网页时有眼前一亮、耳目一新的感觉，用户除了能获取到自己想要的信息，还能在心里说一句：“哎呦，不错哦”，我们的价值就得到了升华！
今天要跟大家分享交流的是怎么用CSS动画特效实现图片旋转的效果，从三个准备开始做起：
一、准备好图片素材
图片大小尽量一致，如果大小有差别的话，可以通过固定统一的width和height，从而可以让画面整齐划一。
二、准备好思路
动画特效特别需要丰富的空间想象力，在三维立体空间中图片沿着x、y、z如何旋转需
要想清楚。

首先准备6张图片

添加样式，通过浮动和定位先让图片叠加在一起

#main .img-list img {
display: block;
position: absolute;
left: 0;
top: 0;
}
然后让6张图片等分360°，那么图片需要绕着Y轴依次旋转60°，如下图所示：

#main .img-list img:nth-of-type(1) {
transform: rotateY(0deg);
}

    #main .img-list img:nth-of-type(2) {
        transform: rotateY(60deg) ;
    }
    
    #main .img-list img:nth-of-type(3) {
        transform: rotateY(120deg);
    }
    
    #main .img-list img:nth-of-type(4) {
        transform: rotateY(180deg);
    }
    
    #main .img-list img:nth-of-type(5) {
        transform: rotateY(240deg);
    }
    
    #main .img-list img:nth-of-type(6) {
        transform: rotateY(300deg);
    }

此时的图片还互相交织在一起，并没有像想象中每个面都完全呈现出来，此时可以通过设置transform:translateY();属性值，可以拉开图片之间的间距，呈现出等边6边型。

要想观看到3D效果，必须给#main加上景深perspective：600px；和观看位置perspective-origin：top；开启3D模式transform-style：preserve-3d;鼠标移入#main区域时，就可以让整个图片绕着z轴开始旋转
三、准备好心情欣赏自己的杰作吧，水灵灵的爽妹子登场啦

详细代码如下：

Document