旋转的立方体

0. 前言

最是一年春好处，恰是回家过年时，昨天，经过“热情”的春运，回到到了家，最近，感觉动画比较带感，今天就做个比较炫酷的东西，旋转的立方体。

1. 简介

CSS3动画，做出来的效果比较吊，可能在你写代码中很少应用，但做出来的效果很厉害的

2. 标签属性

标签	描述
transform	元素可以2D或3D转换
transform-style	规定元素如何在 3D 空间中显示。
animation	可以给元素设置动画
@keyframes 动画名 {from {}to {}}	设置动画从开始到结束的
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
translate3d(x,y,z)	定义 3D 转化。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
rotate3d(x,y,z,angle)	定义 3D 旋转。

3. 实现旋转立方体的思路

1. 先把正方体的六个面放在一起
2. 然后旋转各个面，让它形成一个立方体。
3. 然后让它旋转
4. 我点击开始，开始旋转，点击停止，停止旋转。

4. 代码实现

4.1 静态页面

    
        
        
        
    
    
        

            
1
            
2
            
3
            
4
            
5
            
6
        
        
            
        
    

静态页面.png

我在这里设置一个透明度，可以看出其他的几个面都在它的后面。然后接下来我们旋转它们，让它形成一个立方体的形状。

4.2 旋转形成立方体

怎么旋转？在这里我把它分成三部分
第一部分
translateZ
平移两个面形成正方体前后两个面
第二部分
rotateX(90deg)
反转两个面形成正方体左右两个面

1.jpg

第三部分
rotateY(90deg)
反转两个面形成正方体上下两个面

2.jpg

            /*前面*/
            #box .div1{
                background-color: red;
                transform: translateZ(150px);
            }
            /*后面*/
            #box .div2{
                background-color: deepskyblue;
                transform: translateZ(-150px);
            }
            /*上面*/
            #box .div3{
                background-color: green;
                transform: rotateX(90deg) translateZ(150px);
            }
            /*下面*/
            #box .div4{
                background-color: plum;
                transform: rotateX(90deg) translateZ(-150px);
            }
            /*左面*/
            #box .div5{
                background-color: saddlebrown;
                transform: rotateY(90deg) translateZ(150px);
            }
            /*右面*/
            #box .div6{
                background-color: cyan;
                transform: rotateY(90deg) translateZ(-150px);
            }

旋转好的立方体.png

其实这已经旋转好了，从前面显示的数字可以看出，你可以想象一下，只有旋转起来你才能看出来这是一个立方体，那就看下去吧。

4.3 让它旋转

你让它旋转六个面是不容易的，你可以看我写的结构，在六个面外添加一个大的div，我们旋转div，就能实现立方体旋转了.......

旋转的立方体.gif

4.4 点击按钮

btn.onclick = function () {
                if(this.value == "开始"){
                    this.value ="暂停"
                    box.style.animationPlayState = "running";
                }else{
                    this.value ="开始"
                    box.style.animationPlayState = "paused";
                }
            }

点击按钮.gif

5. 完整代码

    
        
        
        
    
    
        

            
1
            
2
            
3
            
4
            
5
            
6
        
        
            
        
        
    

6. 结束语

过年的脚步越来越近了，提前祝大家新年快乐，好了，这个很炫酷的立方体已经做完了，如果你觉得还可以，就给我点赞，分享一下吧！