3D特效旋转相册

大家先看一下效果动态图

一个炫酷3d旋转的特效图，大家可以也可以把自己喜欢的图片放在上面，

我们写这个之前需要先了解一下transform-style 这个css3属性

transform-style 让转换的子元素保留3D转换也可以 可以写两个值

• flat 表示所有子元素在2D平面呈现
• preserve-3d 表示所有子元素在3D空间中呈现。

看一下兼容性

2d咱们就不说了

咱们主要是看一下 preserve-3d 这个的效果主要是让页面看起来有空间感 尤其是咱们移动了Z轴之后，更加明显

了解一下项目大家理解的会更快

我们看一下html结构

 <div class="content">   
        <div class="box">
            <img src="./images/a.jpeg" alt="" srcset="">
        </div>
        <div class="box">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201505%2F10%2F20150510034724_BVJrW.thumb.400_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661140908&t=cb5a6281142a753d12b5ddd3b9ee9101" alt="" srcset="">
        </div>
        <div class="box">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201607%2F03%2F20160703091947_fe8VH.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661140908&t=a444d81918717c3420a5e9c50db33afe" alt="" srcset="">
        </div>
        <div class="box">
            <img src="./images/d.jpeg" alt="" srcset="">
        </div>
        <div class="box">
            <img src="./images/e.jpeg" alt="" srcset="">
        </div>
    </div>

对box类使用绝对定位 状态如图

几个图片重叠在了一起 我们想要的样式是这样的 大家可以看一下我自己画的俯视图

上图我们原始图片位置了,图片想要画的位置都标记出来了，如果我们想要在页面上看清z轴是否移动，我们在让中心点那个位置向y轴移动30deg，让我调试过程中更加的方面和明显

.content {
  rotateY(30deg)
}
.box{
  transform: translateZ(600px); // z轴移动
}

状态如图(加了3d效果的)

没有加3d效果

没有加translateZ这个属性的移动根本就没体现出来，看到这个大家应该就行了解 transform-style这个属性了，

现在我们需要让图片分布在不同的角度 也很简单 就是给box在加一个

// deg =  360/图片的数量
.box{
  transform: rotateY(deg*1或2活3等等，根据图片的位置去算) translateZ(600px);  deg的角度需要我们根据自己图片的实际情况去算的 
}

可能有些人觉得 rotateY是转动box自身，怎么会向之前掩饰的那种呢， 分布开的呢我们看图

看到上面的图我们就应该理解了，我们其实转动的a，但是由于我们向z轴移动了，在b所在位置了，相当于我们b位置是a位置的影子，但是a位置是隐身的，a位置移动，了b位置也会相对应的移动

最后我们添加转动的动画就可以了

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

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

这是我的代码块