css3可以實現(xiàn)一些動畫過渡之類的。先來研究下api
2D變化
css3提供可以更改元素的css方法，我們可以移動，比例化，反過來，旋轉(zhuǎn)，和拉伸元素。
屬性： transform
transform就和width和height之類的屬性是一樣的。
屬性值可能為：
- translate() 移動
根據(jù)左(X軸)和頂部(Y軸)位置給定的參數(shù)，從當(dāng)前元素位置移動。
div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}
- rotate() 旋轉(zhuǎn)
給定度數(shù)順時針旋轉(zhuǎn)的元素。負(fù)值是允許的，這樣是元素逆時針旋轉(zhuǎn)。
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}
- scale() 縮放
該元素增加或減少的大小，取決于寬度（X軸）和高度（Y軸）的參數(shù)
transform: scale(2,3); /* 標(biāo)準(zhǔn)語法 */ - skew() 傾斜
包含兩個參數(shù)值，分別表示X軸和Y軸傾斜的角度，如果第二個參數(shù)為空，則默認(rèn)為0，參數(shù)為負(fù)表示向相反方向傾斜。
*. skewX(<angle>);表示只在X軸(水平方向)傾斜。
*. skewY(<angle>);表示只在Y軸(垂直方向)傾斜。
屬性transform-origin
默認(rèn)值： 50% 50% 0 表示變化的中心 2d變化前兩個參數(shù)代表x和y，3d變換第三個參數(shù)代表z軸。
但是僅僅在css中加上以上屬性，元素是不會動的。是靜態(tài)的。需要配合過渡屬性transition
屬性 ： transition
我們?yōu)榱颂砑幽撤N效果可以從一種樣式轉(zhuǎn)變到另一個的時候，無需使用Flash動畫或JavaScript。
CSS3 過渡是元素從一種樣式逐漸改變?yōu)榱硪环N的效果。
要實現(xiàn)這一點，必須規(guī)定兩項內(nèi)容：
*. 指定要添加效果的CSS屬性
*. 指定效果的持續(xù)時間。
div
{
transition: width 2s; // div的長度有變化是，過渡效果生效，過渡時間為2秒
-webkit-transition: width 2s; /* Safari */
}
transition: width 1s linear 2s; 或者transition: transform1s linear 2s;
第三個參數(shù)：規(guī)定過渡效果的時間曲線。默認(rèn)是 "ease"。
第四個參數(shù)： 規(guī)定過渡效果何時開始。默認(rèn)是 0。
這樣就可以實現(xiàn)簡易的動畫了。要是我們想實現(xiàn)的動畫不僅僅是伸縮，平移之類的怎么辦，或者我們平移完成后還想伸縮呢，transform提供的只能說一種變化，復(fù)雜的變化需要提前規(guī)定好動畫的規(guī)則？css3也提供了動畫api@keyframes和animation
屬性： @keyframes
@keyframes規(guī)定動畫。 @keyframes規(guī)則內(nèi)指定一個CSS樣式和動畫將逐步從目前的樣式更改為新的樣式。 @keyframes內(nèi)部也可以規(guī)定transform為變化內(nèi)容。
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
當(dāng)在 @keyframes 創(chuàng)建動畫，必須把它綁定到一個選擇器，否則動畫不會有任何效果。
指定至少這兩個CSS3的動畫屬性綁定向一個選擇器：
*. 規(guī)定動畫的名稱
*. 規(guī)定動畫的時長
div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari 與 Chrome */
}
屬性：animation
規(guī)定動畫的時間，運動曲線，何時開始之類的。和transition相同的效果。
遇到的問題
一個div ，目標(biāo)實現(xiàn)： 先沿著X軸旋轉(zhuǎn)180°再沿著Y軸旋轉(zhuǎn)180°。
效果如下
于是我就這么寫
@keyframes demo1run {
0% {transform: rotateX(0deg) }
50% {transform: rotateX(180deg) }
100% {transform: rotateY(180deg) }
}
!想著先X軸變化了180°后。再Y軸變化180°。但這么寫的結(jié)果如下。
奇怪怎么成了先X軸變化了180°后。再Z軸變化180°了呢？？
因為這么寫的話。從50%到100%的變化為 rotateX 180- 0deg, rotateY 0deg - 180 .此時表現(xiàn)的動畫相當(dāng)于rotateZ（180deg） 。旋轉(zhuǎn)變換所以修改成
@keyframes demo1run {
0% {transform: rotateX(0deg) }
50% {transform: rotateX(180deg) }
100% {transform: rotateX(180deg) rotateY(180deg) } // 加上X軸的變化。證明這個過程不要變化X軸
}
3D動畫
想要實現(xiàn)的動畫是3D效果的。必不可少perspective屬性。
perspective ： none?。【哂袉挝坏拈L度值
屬性的默認(rèn)值為none，表示無限的角度來看3D物體，但看上去是平的。另一個值<length>接受一個長度單位大于0的值。而且其單位不能為百分比值。<length>值越大，角度出現(xiàn)的越遠(yuǎn)，從而創(chuàng)建一個相當(dāng)?shù)偷膹姸群头浅Ｐ〉?D空間變化。反之此值越小，角度出現(xiàn)的越近，從而創(chuàng)建一個高強度的角度和一個大型3D變化。比如你站在10英尺和1000英尺的地方看一個10英尺的立方體。在10英尺的地方，你距離立方體是一樣的尺寸。因此視角轉(zhuǎn)變遠(yuǎn)遠(yuǎn)大于站在1000英尺處的，立體尺寸是你距離立方體距離的百分之一。
依據(jù)上面的介紹，我們可對perspective
取值做一個簡單的結(jié)論：
*. perspective取值為none或不設(shè)置，就沒有真3D空間。
*. perspective取值越小，3D效果就越明顯，也就是你的眼睛越靠近真3D。
*. perspective的值無窮大，或值為0時與取值為none效果一樣。
張鑫旭 CSS3 3D transform變換
制作篩子
先實現(xiàn)靜態(tài)的效果圖，目標(biāo)如下
我怎么實現(xiàn)的結(jié)果如下呢？
首先需要給6個面的父元素設(shè)置高度和寬度為6個子div的寬和高。其次需要時元素居中。因為視角的問題。
