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