0. 前言
最是一年春好處，恰是回家過年時，昨天，經(jīng)過“熱情”的春運，回到到了家，最近，感覺動畫比較帶感，今天就做個比較炫酷的東西，旋轉(zhuǎn)的立方體。
1. 簡介
CSS3動畫，做出來的效果比較吊，可能在你寫代碼中很少應(yīng)用，但做出來的效果很厲害的
2. 標(biāo)簽屬性
| 標(biāo)簽 | 描述 |
|---|---|
| transform | 元素可以2D或3D轉(zhuǎn)換 |
| transform-style | 規(guī)定元素如何在 3D 空間中顯示。 |
| animation | 可以給元素設(shè)置動畫 |
| @keyframes 動畫名 {from {}to {}} | 設(shè)置動畫從開始到結(jié)束的 |
| translateX(x) | 定義 3D 轉(zhuǎn)化，僅使用用于 X 軸的值。 |
| translateY(y) | 定義 3D 轉(zhuǎn)化，僅使用用于 Y 軸的值。 |
| translateZ(z) | 定義 3D 轉(zhuǎn)化，僅使用用于 Z 軸的值。 |
| translate3d(x,y,z) | 定義 3D 轉(zhuǎn)化。 |
| scaleX(x) | 定義 3D 縮放轉(zhuǎn)換，通過給定一個 X 軸的值。 |
| scaleY(y) | 定義 3D 縮放轉(zhuǎn)換，通過給定一個 Y 軸的值。 |
| scaleZ(z) | 定義 3D 縮放轉(zhuǎn)換，通過給定一個 Z 軸的值。 |
| rotateX(angle) | 定義沿 X 軸的 3D 旋轉(zhuǎn)。 |
| rotateY(angle) | 定義沿 Y 軸的 3D 旋轉(zhuǎn)。 |
| rotateZ(angle) | 定義沿 Z 軸的 3D 旋轉(zhuǎn)。 |
| rotate3d(x,y,z,angle) | 定義 3D 旋轉(zhuǎn)。 |
3. 實現(xiàn)旋轉(zhuǎn)立方體的思路
- 先把正方體的六個面放在一起
- 然后旋轉(zhuǎn)各個面，讓它形成一個立方體。
- 然后讓它旋轉(zhuǎn)
- 我點擊開始，開始旋轉(zhuǎn)，點擊停止，停止旋轉(zhuǎn)。
4. 代碼實現(xiàn)
4.1 靜態(tài)頁面
<!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>
靜態(tài)頁面.png
我在這里設(shè)置一個透明度，可以看出其他的幾個面都在它的后面。然后接下來我們旋轉(zhuǎn)它們，讓它形成一個立方體的形狀。
4.2 旋轉(zhuǎn)形成立方體
怎么旋轉(zhuǎn)？在這里我把它分成三部分
第一部分
translateZ
平移兩個面形成正方體前后兩個面
第二部分
rotateX(90deg)
反轉(zhuǎn)兩個面形成正方體左右兩個面
1.jpg
第三部分
rotateY(90deg)反轉(zhuǎn)兩個面形成正方體上下兩個面
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);
}
旋轉(zhuǎn)好的立方體.png
其實這已經(jīng)旋轉(zhuǎn)好了，從前面顯示的數(shù)字可以看出，你可以想象一下，只有旋轉(zhuǎn)起來你才能看出來這是一個立方體，那就看下去吧。
4.3 讓它旋轉(zhuǎn)
你讓它旋轉(zhuǎn)六個面是不容易的，你可以看我寫的結(jié)構(gòu)，在六個面外添加一個大的div，我們旋轉(zhuǎn)div，就能實現(xiàn)立方體旋轉(zhuǎn)了.......
<script type="text/javascript">
box.style.animationPlayState = "running";
</script>
旋轉(zhuǎn)的立方體.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. 結(jié)束語
過年的腳步越來越近了，提前祝大家新年快樂，好了，這個很炫酷的立方體已經(jīng)做完了，如果你覺得還可以，就給我點贊，分享一下吧！
