css3之实现简单的正方体转动动画

小灰灰 2023-07-13 04:21 10阅读 0赞

实现正方体转动有很多方式，但开发中最实在的还是用css3开发，内容涉及过渡、转换，有兴趣可学习使自己更强！

**- 第一步：创建结构**

其中`box`内容可看做3d主体元素，而`cube`则是3D元素的一个载体。为什么需要它？

**- 第二步：建立3D环境**

.cube { 
    	width: 200px;
        height: 200px;
        margin: 200px auto;
        perspective: 800px;
    }
    .box { 
    	transform-style: preserve-3d;
        width: 200px;
    	height: 200px;
    	transition: 5s linear;
    	position: relative;
    }

宽高根据自己喜好不定，但`cube`中的`perspective`属性不能少，它也回答了刚刚的问题。**这个属性是规定3D元素到可视面的距离**，我们肉眼可见的3D效果就是与可视面发生的视觉差，这里我也不是专业的就不吹了，有兴趣可以了解了解视觉学。简单说，如果没有`perspective`属性，下面的3D元素将无法实现。一般我设置800-1000左右。  
`box`中的`transform-style: preserve-3d;`属性值规定了div动画内容为3D样式；`transition: 5s linear;`属性值规定了动画时间5秒、速度匀速。

**- 设置样式**  
先给正方体六个面一个统一样式，用定位让它们叠放在一起，设置背景颜色、字体大小、字体颜色以及透明度：

.box div { 
    	width: 200px;
    	line-height: 200px;
    	border: 1px solid #999999;
    	position: absolute;
    	font-size: 34px;
    	color: white;
    	text-align: center;
    	background-color: black;
    	opacity: 0.8;
    }

然后就是对每个面进行角度转换，位置偏移来构成一个正方体：

.child-th1{ 
    	 transform: translateZ(-101px);
    }
    .child-th2{ 
    	transform: translateZ(101px);
    }
    .child-th3{ 
    	transform: rotateY(90deg) translateZ(101px);
    }
    .child-th4{ 
    	transform: rotateY(-90deg) translateZ(101px);
    }
    .child-th5{ 
    	transform: rotateX(90deg) translateZ(-101px);
    }
    .child-th6{ 
    	transform: rotateX(90deg) translateZ(101px);
    }

**- 设置动画**  
最后，在`box`的`hover`伪类上设置正方体转动动画：

.box:hover{ 
    	transform: rotateY(360deg);
    }

这样一个简单的正方体自转动画就实现了。  
**下面是完整的源代码，有兴趣的朋友可以了解模仿：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>cube</title>
    </head>
    <body>
        <div class="cube">
            <div class="box">
                <div class="child-th1">1</div>
                <div class="child-th2">2</div>
                <div class="child-th3">3</div>
                <div class="child-th4">4</div>
                <div class="child-th5">5</div>
                <div class="child-th6">6</div>
            </div>
        </div>
    </body>
    <style>
        .cube { 
            width: 200px;
            height: 200px;
            margin: 200px auto;
            perspective: 800px;
        }
        .box { 
            transform-style: preserve-3d;
            width: 200px;
            height: 200px;
            transition: 5s linear;
            position: relative;
        }
        .box div { 
            width: 200px;
            line-height: 200px;
            border: 1px solid #999999;
            position: absolute;
            font-size: 34px;
            color: white;
            text-align: center;
            background-color: black;
            opacity: 0.8;
        }
        .child-th6{ 
            transform: rotateX(90deg) translateZ(101px);
        }
        .child-th5{ 
            transform: rotateX(90deg) translateZ(-101px);
        }
        .child-th4{ 
            transform: rotateY(-90deg) translateZ(101px);
        }
        .child-th3{ 
            transform: rotateY(90deg) translateZ(101px);
        }
        .child-th2{ 
            transform: translateZ(101px);
        }
        .child-th1{ 
            transform: translateZ(-101px);
        }
        .box:hover{ 
            transform: rotateY(360deg);
        }
    </style>
    </html>