我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！

前言

  这次给大家带来的是一个会旋转的图片展示器，用纯 CSS 实现，十分简单。简称之有手就行，没你不行。 先给各位看看源码地址去效果或者直接看我下面给出的效果图。

源码地址

上效果

  不多废话，直接上教程。

实现思路

源码地址

  首先我们准备9张好看的图片（不是9张没关系，不是好看的也咩关系），将它们放在一个容器中。

 <div class="wrap">
        <div class="imgwrap">
            <img src="image/1.jpg" alt="" width="200" height="300">
        </div>
       ......
       （此处省略8个div）
    </div>

transform-style

  然后怎么能让这些图片图片呈现 3D 效果呢？这时候，有个属性跳出来说：“ 这是我干的话，你们让开 ”。这个属性就是 transform-style: preserve-3d，它能使子级元素具有 3D 效果。在 CSS3 中，允许我们使用 3D 转换来对元素进行格式化。

.wrap{
    width: 300px;
    height: 200px;
    margin: 200px auto;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-16deg);
    animation: identifier 10s linear infinite;
}

  这里的宽度应比图片设置的宽度要大上一些，这样才会有层叠式间隙的效果。假如我们把 width 设为 200px，则效果如下：

@keyframes

  实现了图片 3D 效果还不够，接下来我们还需要让它动起来，这时候 @keyframes 站出来说：“ 这方面我在行 ”。用 @keyframes 来制定动画规则，是我们最熟悉不过的东西了。

@keyframes identifier {
    from{
        transform: rotateX(-16deg) rotateY(0deg);
    }
    to{
        transform: rotateX(-16deg) rotateY(360deg);
    }
}

  from...to... 等价于 0% ~ 100%，rotateX() 方法下面即将介绍。

transform

  光用 @keyframes 还不够，还需要其他的属性来衬托，比如 transform。它应用于元素的 2D 或 3D 转换，可以将元素旋转，缩放，移动，倾斜等，默认值是 none。transform 也称为变形属性。

.imgwrap:nth-child(1){
    transform: rotateY(0deg) translateZ(275px);
}
.imgwrap:nth-child(2){
    transform: rotateY(40deg) translateZ(275px);
}
.imgwrap:nth-child(3){
    transform: rotateY(80deg) translateZ(275px);
}
.imgwrap:nth-child(4){
    transform: rotateY(120deg) translateZ(275px);
}
.imgwrap:nth-child(5){
    transform: rotateY(160deg) translateZ(275px);
}
.imgwrap:nth-child(6){
    transform: rotateY(200deg) translateZ(275px);
}
.imgwrap:nth-child(7){
    transform: rotateY(240deg) translateZ(275px);
}
.imgwrap:nth-child(8){
    transform: rotateY(280deg) translateZ(275px);
}
.imgwrap:nth-child(9){
    transform: rotateY(320deg) translateZ(275px);
}

  九张图，所以九张图角度在 360 度里等分即可，如果是 n 张图，就是 n 张图角度在 360 度里等分即可。

rotateX() && rotateY()

  通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。同理，rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。如果设为 rotateX(0deg)，则效果如下：

  这样的话看起来就没有立体感。所以设置倾斜角，让其看起来更具立体效果。

translateZ()

  translateZ(xxx) 相当于 translate3d(0,0,xxx)，xxx 表示平移矢量 z 分量的值。正值表示将元素移向观察者，负值表示将远离观察者。

小结

• y轴旋转方向：正值逆时针，负值顺时针

• x轴旋转方向：正值顺时针，负值逆时针

• z轴旋转方向：正值顺时针，负值逆时针

  如果 rotate 将对象旋转的话，可以用左手螺旋定则判断旋转方向。左手拇指指向箭头方向，左手的其余四指指向就是旋转方向。

最后

  这一类有关 CSS 东西后面还会常做常写，写起来挺有意思的。欢迎大家多多点赞和关注。

  源码地址