css3 的轉換和過渡

一、轉換 transform

1.旋**transform:rotate()

旋轉rotate()函式通過指定的角度引數使元素相對原點進行旋轉。它主要在二維空間內進行操作，設定乙個角度值，用來指定旋轉的幅度。

如果這個值為正值，元素相對原點中心順時針旋轉；如果這個值為負值，元素相對原點中心逆時針旋轉。

transform:rotate(30deg);//旋轉30度(平面），與沿z軸一樣

transform:rotatex(30deg);//沿x軸旋轉30度
transform:rotatey(30deg);//沿y軸旋轉30度
transform:rotatez(30deg);//沿z軸旋轉30度
transform:rotatex(30deg) rotatey(30deg) rotatez(30deg);//沿x、y、z軸各旋轉30度
角度取負值就是反方向;行內元素span，要設定display:block|inline-block;才能旋轉；
2. 縮放：transform:scale()  ,縮放 scale()函式 讓元素根據中心原點對物件進行縮放。
transform:scale(1.2,0.8);//水平放大到原來的1.2倍，垂直縮小為原來的0.8倍；

transform:scalex(1.2);//只水平縮放，
transform:rotatey(0.8);//只垂直縮放
3.位移：transform:translate()
translate()函式可以將元素向指定的方向移動，類似於position中的relative。
或以簡單的理解為，使用translate()函式，
可以把元素從原來的位置移動，而不影響在x、y軸上的任何web元件。
//位移是根據元素的原來位置，而位移，用百分比則是根據元素的寬、高 而位移                

transform:translate(20px 10px); 位移，x方向位移20px，y方向位移10px;
transform:translatex(50px);x方向
transform:translatey(40px); y方向
transform:translate(50%,50%);位移，x方向位移元素寬度的50%，y方向位移元素寬度的50%;
4.變形--原點： transform-origin()
任何乙個元素都有乙個中心點，預設情況之下，其中心點是居於元素x軸和y軸的50%處。也就是中心點 
在沒有重置transform-origin改變元素原點位置的情況下，css變形進行的旋轉、位移、縮放，扭曲等操作都是以元素自己中心位置進行變形。
但很多時候，我們可以通過transform-origin來對元素進行原點位置改變，使元素原點不在元素的中心位置，以達到需要的原點位置。
transform-origin:left top;//原點在左上角；

transform-origin:center bottom;//原點在底邊中間；
transform-origin:30% 40%;//原點在座標為：寬的30%、高的40% 處；百分比可大於100% 
transrorm-origin:25px 25px; // 原點在座標：25px 25px 處。 
//百分比與畫素具體值是相對左上角（0 0）來說的
5.傾斜：transform:skew(角度)   在x 或y方向傾斜一定角度
transform:skew(10deg,10deg);//沿著 x 和 y 軸的2d傾斜10deg。

transform:skewx(20deg);//沿著 x 軸的 2d 傾斜20。
6.transform書寫規範
transform在不同瀏覽器核心下的書寫規則:

//mozilla核心瀏覽器：firefox3.5+
-moz-transform: rotate | scale | skew | translate ;
//webkit核心瀏覽器：safari and chrome
-webkit-transform: rotate | scale | skew | translate ;
//opera
-o-transform: rotate | scale | skew | translate ;
//ie9
-ms-transform: rotate | scale | skew | translate ;
//w3c標準
transform: rotate | scale | skew | translate ;
//上面列出是不同瀏覽核心transform的書寫規則，如果需要相容各瀏覽器的話，以上寫法都需要呼叫
二、過渡 transitiontransition它可以通過一些簡單的css事件來觸發元素的外觀變化，讓效果顯得更加細膩。

簡單點說，就是通過滑鼠的單擊、獲得焦點，被點選或對元素任何改變中觸發，並平滑地以動畫效果改變css的屬性值。
在css中建立簡單的過渡效果可以從以下幾個步驟來實現：
第一，在預設樣式中宣告元素的初始狀態樣式；
第二，宣告過渡元素最終狀態樣式，比如懸浮狀態；
第三，在預設樣式中通過新增過渡函式，新增一些不同的樣式。
css3的過渡transition屬性是乙個復合屬性，主要包括以下幾個子屬性：<

br />
transition-property:指定過渡或動態模擬的css屬性
<
br />
transition-duration:指定完成過渡所需的時間
<
br />
transition-timing-function:指定過渡函式
<
br />
transition-delay:指定開始出現的延遲時間
<
br />
1.需要過渡的屬性：transition-property

transition-property用來指定過渡動畫的css屬性名稱，而這個過渡屬性只有具備乙個中點值的屬性（需要產生動畫的屬性）才能具備過渡效果，其對應具有過渡的css屬性主要有：
//特別注意：當「transition-property」屬性設定為all時，表示的是所有中點值的屬性。也就是懶得寫width、color之類，直接寫個all

divdiv:hover //hover執行過渡，寬度由原來過渡到500px，背景色由原來過渡到橙黃色
復合寫法：

transition:width 0.5s ease 0s; //其中運動方式ease可不寫(採用預設)；延遲時間可不寫(預設無延遲)；
transition:all 0.5s 0.2s; //當有兩個時間時，第乙個表示過渡的時間，第二個是延遲的時間，
//all可代替所有屬性，當所有屬性同時開始過渡，可採用此樣式，
有先後順序的多重過渡：
transition:width 0.5s,height 0.5s 0.5s,background-color 0.8s linear 1s;
// 表示先是寬過渡，寬過渡結束後開始高度過渡，結束後再是背景色過渡，計算後各自延遲時間


//例子

.box2 span
.box2:hover span
 
CSS3的過渡 動畫 轉換
特別說明 以下屬性目前都需要加上各瀏覽器廠商字首,瀏覽器 廠商字首 瀏覽器核心 chrome safari webkit blink webkit opera o blink firefox moz gecko ie ms trident 1 過渡 transition property 指定應用過...
CSS3過渡和動畫
此文首發於 lijing0906.github.io 智慧型運維,圓球一直勻速旋轉。html id testpage class topbar class ball src css3anitran 0.png alt srcset div class bottombar src css3anitra...
css3過渡和動畫
css3裡面新增屬性 transition animation 等等，方便了前端小夥伴們做動畫。不用再用js寫長長的一大串，效果還不好！這是對我等菜鳥來說，大神們怎麼著都可以，唉！用 來實現動畫，其實就是不同時間，元素有不同的狀態。而這裡面有個很好用的2d轉換屬性 transform，廣大瀏覽器的支...