一步步教你打造3D旋转盒

Posted 2020-07-31 DJL箫氏

今天又来一了一篇关于3D效果的文章，教你打造自己的3D旋转盒

首先还是希望大家自己看看关于transform这个属性的相关特性作用，张前辈已经写了详细的教程，直接附上

http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/comment-page-1/

OK下面我们开始吧

首先我们创建如下的html基本骨架

<div id="container">
    <div id="box">
        <div class="plane front"></div>
        <div class="plane back"></div>
        <div class="plane top"></div>
        <div class="plane bottom"></div>
        <div class="plane left"></div>
        <div class="plane right"></div>
    </div>
</div>

要体现出3D的那种近大远小的感觉，我们首先需要在id=\'container\'的DIV中加入perspective:800px;(常用值)，这个值越小近大远小的感觉会越明显，到接近0时，就会充满荧屏，就像你在眼前放一片叶子，很近的话，小小叶子就会充满你的整个视野，从而看不见其他东西，正所谓一叶障目，不见泰山。然后再加上一些其他基本样式

CSS代码：

#container {
width:200px;
height:200px;
border:1px solid #FF0;
position:relative;
perspective:800px;
margin:200px auto;
}

这是看见的应该只有一个黄色的正方形边框。

然后id="box"这个div很显然是这个旋转的盒子主体，里面的6个div就是盒子的六个面，现在我们要做的就是如何旋转和平移这六个面，是她拼接成一个立方体。

首先我们跟这6个面加上基本样式（长、宽、颜色）

　　　　 .plane{width: 100px;height: 100px;}
        .front{background: pink;}
        .back{background: purple;}
        .top{background: red;}
        .bottom{background: black;}
        .left{background: yellow;} 
        .right{background: green;}

那么得到将是下面的样子

现在呢，我们就需要将这6个面旋转平移拼成一个立方体了，首先我们需要将id="box"这个div设置成3D模式呈现，即加入下面的css代码：

#box {
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
margin:73px auto;
}

 

然后我们将六个面相对于id="container"的DIV来个绝对定位，在.plane的类中加入

position: absolute;

那么我们就会得到下面的效果：

好了现在就好比，你手里有6张正方形的卡片，叠在一起，现在你要怎么将每个面进行不同的旋转平移变成一个立方体的问题，是不是马上就有了思路，下面我们就需要用代码来实现。为了便于观察，我们将加入如下代码

现在我们将黄色的面也就是class="left"的面进行以Y轴旋转90度，得到下图

然后我们只需要将这个黄色的面，向左边平移50px就行了（因为我们的立方体的边长为100，只需左边的面向左平移50px。右边的向右平移50px，合起来就是100px）,但是如果平移50px，会刚好被绿色的面给挡住，所以我们平移60px,

.left{background: yellow;transform: rotateY(-90deg) translateZ(60px);} 

 

得到下图：

我们的俯视图将是这样

同样我们的右面可以这样得到：

.right{background: green;transform: rotateY(90deg) translateZ(60px);}

效果图（左边正视图，右边俯视图）

现在就需要前后两个面了，从上面的俯视图中我们可以知道，前后两面不需要旋转，只需要平移即可，代码如下

.front{background: pink;transform: translateZ(60px);}
.back{background: purple;transform: translateZ(-60px);}

效果图（左边正视图，右边俯视图）

 

现在就只需要处理上下两个面了，底面和顶面先都围绕X轴旋转90度

.top{background: red;transform: rotateX(90deg);}
.bottom{background: black;transform: rotateX(90deg);}

俯视图如下

现在只需要，底面向下平移50度，顶面向上平移50度就行了

.top{background: red;transform: rotateX(90deg) translateZ(50px);}
.bottom{background: black;transform: rotateX(90deg) translateZ(-50px)}

效果图（效果图都让id=\'box\'的div进行了一定的旋转，便于观察）

 

现在我们把平移的长度换成50px，每个面之间就不会再有缝隙了

        .plane{width: 100px;height: 100px;position: absolute;}
        .front{background: pink;transform: translateZ(50px);}
        .back{background: purple;transform: translateZ(-50px);}
        
        .left{background: yellow;transform: rotateY(-90deg) translateZ(50px);} 
        .right{background: green;transform: rotateY(90deg) translateZ(50px);}
        
        .top{background: red;transform: rotateX(90deg) translateZ(50px);}
        .bottom{background: black;transform: rotateX(90deg) translateZ(-50px)}
        

效果图：

OK 已经出来了，现在我们加上动画，让这个盒子转起来：

　　　　 #container{width: 200px;height: 200px;border:1px solid yellow;margin:50px auto;position: relative;perspective:800px;}
        #box{-webkit-transform-style: preserve-3d;transform-style: preserve-3d;margin: 50px auto;animation:play 30s infinite linear ;}
        /* 6个面 */
        .plane{width: 100px;height: 100px;position: absolute;}
        .front{background: pink;transform: translateZ(50px);}
        .back{background: purple;transform: translateZ(-50px);}
        
        .left{background: yellow;transform: rotateY(-90deg) translateZ(50px);} 
        .right{background: green;transform: rotateY(90deg) translateZ(50px);}
        
        .top{background: red;transform: rotateX(90deg) translateZ(50px);}
        .bottom{background: black;transform: rotateX(90deg) translateZ(-50px)}
        
        
        @keyframes play{
            to{transform: rotateX(360deg) rotateY(360deg);}
        }
        

OK，盒子就自己转起来了，怎么样，炫酷吧，我们可以用这个来做3Dbanner图，3D的旋转柱，3D的选项卡等等 如下图：

     

效果展示链接：http://djlxs.herokuapp.com/

怎么样效果不错吧