CSS3動畫之旋轉小魔方

利用css3動畫特性的小例子

<

!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
"x-ua-compatible" content=
"ie=edge"
>
document<
/title>
width:
300px;
height:
300px;
}.box
.box div
.box div:nth-of-
type(1
).box div:nth-of-
type(2
).box div:nth-of-
type(3
).box div:nth-of-
type(4
).box div:nth-of-
type(5
).box div:nth-of-
type(6
) @keyframes move
100%
}<
/style>
<
/head>
=>
="box"
>
1<
/div>
2<
/div>
3<
/div>
4<
/div>
5<
/div>
6<
/div>
<
/div>
<
/div>
<
/body>
<
/html>

總結一下在2d和3d中座標軸的方向來判斷translate和rotate的方向

座標軸橫x豎y面朝自己是z軸

在2d中translatez和translatex方向是一樣的

CSS3簡單魔方動畫效果

在魔方效果中我們主要用到的是animation動畫，transition 過渡 transform 變換 首先我們在body裡面下我們需要的標籤元素 這裡也可以用div寫 li li li li li li ul body 寫好後我們在style標籤裡寫我們所需要的的樣式 先給ul設定我們所需要的樣...

css3動畫方塊旋轉

html translate x,y 基於原來的位置，沿x軸平移，長度為x，沿2軸平移，長度為ytransform translate x,y translatex x 基於原來的位置，沿x軸平移，長度為xtransform translatex x translatey y 基於原來的位置,沿y軸...

CSS3旋轉及動畫

一 css3轉換 1 元素的2d轉換 1 transform none 不進行轉換 2transform translate x,y 定義2dd轉換，移動 3transform translate3d x,y,z 定義3d轉換 4transform tranlatex value 使用x軸的值轉換 ...