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

前言

这次给大家带来的是一个图片3D展示器，用纯 CSS 实现，十分简单。简称之有手就行，没你不行。

源码地址

上效果

3D (1).gif

大气吧！不多废话，直接上教程。

实现思路

源码地址

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

 <div class="wrap">
        <div class="imgwrap">
            <img src="image/1.jpg" alt="" width="200" height="300">
        </div>
        <div class="imgwrap">
            <img src="image/2.jpg" alt="" width="200" height="300">
        </div>
        <div class="imgwrap">
            <img src="image/3.jpg" alt="" width="200" height="300">
        </div>
        <div class="imgwrap">
            <img src="image/4.jpg" alt="" width="200" height="300">
        </div>
        <div class="imgwrap">
            <img src="image/5.jpg" alt="" width="200" height="300">
        </div>
        <div class="imgwrap">
            <img src="image/6.jpg" alt="" width="200" height="300">
        </div>
        <div class="imgwrap">
            <img src="image/7.jpg" alt="" width="200" height="300">
        </div>
        <div class="imgwrap">
            <img src="image/8.jpg" alt="" width="200" height="300">
        </div>
        <div class="imgwrap">
            <img src="image/9.jpg" alt="" width="200" height="300">
        </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 东西后面还会常做常写，写起来挺有意思的。欢迎大家多多点赞和关注。

十分钟带你手撸一个大气的图片3D展示器

前言

上效果