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. 实现旋转立方体的思路
- 先把正方体的六个面放在一起
- 然后旋转各个面，让它形成一个立方体。
- 然后让它旋转
- 我点击开始，开始旋转，点击停止，停止旋转。
4. 代码实现
4.1 静态页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 300px;
height: 300px;
background-color: pink;
position: relative;
margin: 100px auto;
animation: run 10s linear alternate paused infinite;
transform-style: preserve-3d;
}
@keyframes run{
from{
transform: rotateX(0) rotateY(0);
}
to{
transform: rotateX(300deg) rotateY(200deg);
}
}
#box div{
width: 300px;
height: 300px;
position: absolute;
background-color: orange;
text-align: center;
line-height: 300px;
font-size: 50px;
opacity: 0.5;
}
</style>
</head>
<body>
<div id="box">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
<div class="div6">6</div>
</div>
<center>
<input type="button" name="" id="btn" value="开始" />
</center>
</body>
</html>
静态页面.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，就能实现立方体旋转了…….
<script type="text/javascript">
box.style.animationPlayState = "running";
</script>
旋转的立方体.gif
4.4 点击按钮
btn.onclick = function () {
if(this.value == "开始"){
this.value ="暂停"
box.style.animationPlayState = "running";
}else{
this.value ="开始"
box.style.animationPlayState = "paused";
}
}
点击按钮.gif
5. 完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 300px;
height: 300px;
background-color: pink;
position: relative;
margin: 100px auto;
animation: run 10s linear alternate paused infinite;
transform-style: preserve-3d;
}
@keyframes run{
from{
transform: rotateX(0) rotateY(0);
}
to{
transform: rotateX(300deg) rotateY(200deg);
}
}
#box div{
width: 300px;
height: 300px;
position: absolute;
background-color: orange;
text-align: center;
line-height: 300px;
font-size: 50px;
opacity: 0.5;
}
#box{
background: transparent;
}
/*前面*/
#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);
}
</style>
</head>
<body>
<div id="box">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
<div class="div6">6</div>
</div>
<center>
<input type="button" name="" id="btn" value="开始" />
</center>
<script type="text/javascript">
btn.onclick = function () {
if(this.value == "开始"){
this.value ="暂停"
box.style.animationPlayState = "running";
}else{
this.value ="开始"
box.style.animationPlayState = "paused";
}
}
</script>
</body>
</html>
6. 结束语
过年的脚步越来越近了，提前祝大家新年快乐，好了，这个很炫酷的立方体已经做完了，如果你觉得还可以，就给我点赞，分享一下吧！
