纯css实现3D双层立体旋转相册

纯css实现3D双层立体旋转相册

首先我们要明确思路，这是做好任何事的关键。
1.搭建好HTML的结构，选择好标签；
2.实现立体效果；
3.用css实现最后的旋转和变换效果。
4.百度网盘链接（源码）

1. 搭建结构

我们这里采用双层div来实现立体旋转效果：
这里我们选择使用 无序列表ul 和 有序列表ol 来作为两层盒子容器（方便使用）。

   <div class="box">
        <ul class="minbox">   
            <li>li>
            <li>li>
            <li>li>
            <li>li>
            <li>li>
            <li>li>
        ul>
        <ol class="maxbox">
            <li>li>
            <li>li>
            <li>li>
            <li>li>
            <li>li>
            <li>li>
        ol>
    div>

2.实现立体效果

为了做成立方体效果，我们把每个 li 设置
这里我们使用transform-style的属性值preserve-3d将我们的立体效果呈现出来。
在最外面的一个盒子（div）和里面的小盒子（minbox），我们采用绝对定位，然后给 li 设置绝对定位将立方体的六个面放到相应位置。

使用transform属性：属性值 translate（平移） rotate（旋转） scale（缩放） skew（倾斜）
注意这里的X,Y,X相当于左标轴的方向，x轴相当于水平方向，y轴相当于竖直方向，z轴为垂直于屏幕方向

ul下的第一个li的css的样式设为transform: translateZ(50px);（前面）
ul下的第二个li的css的样式设为transform: rotateX(180deg) translateZ(50px);（后面）
ul下的第三个li的css的样式设为transform: rotateX(90deg) translateZ(50px);（上面）
ul下的第四个li的css的样式设为transform: rotateX(-90deg) translateZ(50px);（下面）
ul下的第五个li的css的样式设为transform: rotateY(90deg) translateZ(50px);（左面）
ul下的第六个li的css的样式设为*transform: rotateY(-90deg) translateZ(50px);（右面）

为了方便设置这里的多个 li ，我们使用结构伪类 nth-child(n) 表示第几个孩子，顺便说一下，如果有其他标签嵌入其中，也会计算在其中，即是指父元素的第几个孩子，而不是指父元素的第几个 li ，在使用结构伪类的时候需要特别注意。

同样设置 maxbox 的 css样式，基本的立方体结构就搭好了

注意：transform中多个属性值是 从后往前 执行的。

3.实现旋转效果

这里我们使用的是动画（animation）来实现旋转效果
先来回忆一下动画的定义：@keyframes 动画名称 {
从0%到100%的实现过程（相当于动画的每一个帧）
}

调用过程：animation:动画名称 完成一次的时间 速度曲线（通常为linear） 动画播放次数

@keyframes go {
    0% {
        -webkit-transform: rotateX(13deg) rotateY(0deg);
        /* 开始时沿x轴13度（为了看到底部的图片） y轴开始为0度逐渐转到360度 */
    }
    100% {
        -webkit-transform: rotateX(13deg) rotateY(360deg);
    }
}

为了旋转时盒子不会出现左右摆动的情形，我们需要使用left和top属性来固定

4.添加变换效果（hover伪类）

hover伪类就是当鼠标悬浮时怎么变化
我们让鼠标进入外面盒子的范围时，让外面的盒子可以撑开，并且外面的盒子里的图片可以看的更加清楚

例如：我们给第一个li设置此样式时：

.box:hover ol li:nth-child(1) {
    transform: translateZ(300px);
    width: 400px;
    height: 400px;   
    opacity: 0.8;	/*透明度设置*/
    left: -100px;
    top: -100px;
}

同样设置后面几个的样式即可

5.百度网盘链接

链接：link
提取码：csdn