学习 CSS 之用 CSS 3D 实现炫酷效果

一、前言

　　把大象关进冰箱需要几步？三步，把冰箱门打开，把大象关进去，把冰箱门关上。

　　用 CSS 实现 3D 效果需几步？三步，设置透视效果 perspective，改变元素载体为 preserve-3d，对元素进行 3D 转换操作。

　　perspective 属性决定了我们从什么地方查看元素，定义时的 perspective 属性，它是一个元素的子元素，透视图，而不是元素本身。

　　再说 3D 转换操作，需要用到的就是 translateX，translateY，translateZ，写到一块就是 translate-3d，除此之外还有 rotateX，rotateY，rotateZ。至于平移和旋转的方向，可以参考下面的三维坐标图：

　　

二、CSS 翻页效果

1.创建透视背景

　　首先是要创建一个透视背景，也就是一个具有 perspective 属性的 div，这里我给 perspective 的值为800个像素单位。除此之外，还要有一个 div，将所有页面都包括在这个 div 中，这个 div 需要设置 position 为 relative，因为后面的页面都要使用绝对定位，并且要设置 transform-style 属性为 preserve-3d。相关 CSS 代码如下：

 .back {
     perspective: 800px;
     perspective-origin: % %;
     overflow: hidden;
     margin: 10px;
 }

 .content {
     width: 400px;
     height: 400px;
     margin:  auto;
     transform-style: preserve-3d;
     position: relative;
 }

2.创建页面

　　在 CSS 类为 content 的 div 中创建多个页面，将除了第一页以外的页面全都“放倒”，即以底边为变换中心，然后在 X 方向上旋转90度，CSS 代码如下：

transform-origin: bottom;

transform: rotateX(90deg);

　　除此之外，还要设置 transition 属性，页面的 CSS 代码如下：

 .page {
     width: 360px;
     height: 360px;
     padding: 20px;
     background-color: black;
     color: white;
     font-weight: bold;
     font-size: 300px;
     text-align: center;
     position: absolute;
 }

 #p1 {
     transform-origin: bottom;
     transition: transform 1s linear;
 }

 #p2,
 #p3,
 #p4,
 #p5,
 #p6 {
     transform-origin: bottom;
     transition: transform 1s linear;
     transform: rotateX(90deg);
 }

3.添加按钮实现翻页

　　添加两个按钮用于实现向前翻页和向后翻页。向前翻页时，当前页面在 X 方向上旋转-90度，也就是向前旋转90度倒下了，然后将下一页改为 rotate(0deg) 立起来。向后翻页就是一个逆向的过程了，这里就不再赘述了。控制翻页的 JS 代码如下：

 <script>
     var curIndex = 1;

     function previous() {
         console.log(curIndex);
         if (curIndex === 1) {
             return
         }
         var curPage = document.getElementById("p" + curIndex);
         curPage.style.transform = "rotateX(90deg)";

         curIndex--;
         var prevPage = document.getElementById("p" + curIndex);
         prevPage.style.transform = "rotateX(0deg)";
     }

     function next() {
         console.log(curIndex);
         if (curIndex === 6) {
             return
         }
         var curPage = document.getElementById("p" + curIndex);
         curPage.style.transform = "rotateX(-90deg)";

         curIndex++;
         var nextPage = document.getElementById("p" + curIndex);
         nextPage.style.transform = "rotateX(0deg)";
     }
 </script>

　　需要注意的是，在向前和向后翻页时，需要对第一页和最后一页进行一个判断。

三、CSS 旋转正方体

1.创建正方体

　　用 CSS 创建一个旋转的正方体，首先也是要创建一个透视的背景，然后创建六个页面，分别进行平移和旋转操作，构造出一个正方体，CSS 代码如下：

 .face {
     width: 160px;
     height: 160px;
     padding: 20px;
     color: white;
     position: absolute;
     transition: transform 1s linear;
 }

 #f1 {
     background-color: aqua;
 }

 #f2 {
     background-color: blue;
     transform-origin: right;
     transform: rotateY(-90deg)
 }

 #f3 {
     background-color: green;
     transform-origin: top;
     transform: rotateX(-90deg)
 }

 #f4 {
     background-color: yellow;
     transform-origin: bottom;
     transform: rotateX(90deg)
 }

 #f5 {
     background-color: red;
     transform-origin: left;
     transform: rotateY(90deg)
 }

 #f6 {
     background-color: pink;
     transform: translateZ(-200px);
 }

2.旋转正方体

　　进行完第一步之后，一个正方体就已经出来了，但是我们还只能看到两个面，这时可以对整体进行一下旋转，就能看到更多的面了。JS 代码如下：

 <script>
     setInterval(function() {
         for (var i = 1; i < 361; i++) {
             var ele = document.getElementById("content");
             ele.style.transform = "rotate(" + i + "deg)";
         }
     }, 1000)
 </script>

完整代码已上传到 GitHub！