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

编程语言 2022-08-06 06:42:58 阅读次数: 0

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

前言

这次给大家带来的是一个图片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 来制定动画规则，是我们最熟悉不过的东西了。

扫描二维码关注公众号，回复： 14446026 查看本文章

@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);
}
复制代码