關(guān)于css3變形
CSS3變形是一些效果的集合，比如平移、旋轉(zhuǎn)、縮放和傾斜效果，每個(gè)效果都被稱作為變形函數(shù)（Transform Function）,它們可以操控元素發(fā)生旋轉(zhuǎn)、縮放、和平移等變化。這些效果在之前都需要依賴圖片、Flash或JavaScript才能完成。而使用純CSS來完成這些變形則無需加載這些額外的文件，再一次提升了你的開發(fā)效率，還提高了頁面的執(zhí)行效率。
CSS變形允許您動(dòng)態(tài)的控制元素。您可以在屏幕周圍移動(dòng)它們，縮小或擴(kuò)大，旋轉(zhuǎn)，或結(jié)合所有這些產(chǎn)生復(fù)雜的動(dòng)畫效果。通過CSS變形，可以讓元素生成靜態(tài)視覺效果，但也可以很容易結(jié)合CSS3的transition和動(dòng)畫的keyframe產(chǎn)生一些動(dòng)畫效果。
css3的相關(guān)函數(shù)：
- CSS3的transform屬性指一組轉(zhuǎn)換函數(shù)。CSS3的2D transform函數(shù)包括translate()、scale()、rotate()和skew()。
- translate()函數(shù)接受CSS的標(biāo)準(zhǔn)度量單位；scale()函數(shù)接受一個(gè)0和1之間的十進(jìn)制值；rotate()和skew()兩個(gè)函數(shù)都接受一個(gè)徑向的度量單位值deg。除了rotate()函數(shù)之外，每個(gè)函數(shù)都接受X軸和Y軸的參數(shù)。
- CSS3變形中具有X /Y可用的函數(shù)：translateX()、translateY()、scaleX()、scaleY()、skewX()和skewY()。 2D變形中還有一個(gè)矩陣matrix()函數(shù)，其包括六個(gè)參數(shù)。
CSS3 3D變形包括函數(shù)有：rotateX()、rotateY()、rotate3d()、translateZ()、translate3d()、scaleZ()和scale3d()。 - CSS3 3D變形中也包括一個(gè)矩陣matrix3d()函數(shù)，其包括16個(gè)參數(shù)。
- transform-origin屬性指定元素的中心點(diǎn)在哪。后面增加了第三個(gè)數(shù)transform-origin-z，控制元素三維空間中心點(diǎn)。
- perspective屬性相對于觀眾產(chǎn)生一個(gè)3D場景，你看3D物體，眼睛到畫布的距離。正確的用法是他需要應(yīng)用到變形元素的祖先元素上。
- perspective-origin為視點(diǎn)的位置。
- backface-visibilty屬性用來設(shè)置背面的可見性。
- 設(shè)置transform-style的值為preserve-3d值，建立一個(gè)3D渲染環(huán)境。
transform
CSS3的變形（transform）屬性讓元素在一個(gè)坐標(biāo)系統(tǒng)中變形。這個(gè)屬性包含一系列變形函數(shù)，可以移動(dòng)、旋轉(zhuǎn)和縮放元素。transform屬性的基本語法如下
transform：none | <transform-function> [<transform-function>]*transform屬性可用于內(nèi)聯(lián)元素和塊元素。其默認(rèn)值為none，表示不元素不進(jìn)行變形。transform另一個(gè)屬性值是一系列的<transform-function>。<transform-function>表示一個(gè)或多個(gè)變形函數(shù)，以空格分開；換句話說就是我們同時(shí)對一個(gè)元素進(jìn)行變形的多種屬性操作，例如rotate、scale、translate等。但這里需要提醒大家，以往我們疊加效果都是用逗號(hào)(“，”)隔開，但在transform中使用多個(gè)transform-function時(shí)卻需要有空格隔開。
transform屬性3D變形（3D transform）模塊的一部分，也就是說所有的2D變形函數(shù)也包含于3D變形規(guī)范中。如此一來，CSS3變形中的函數(shù)根據(jù)不同的規(guī)范略有不同，下面列出的是變形中的2D和3D常用變形函數(shù)的功能
2D transform常用的transform-function的功能:
translate()：用來移動(dòng)元素，可以根據(jù)X軸和Ｙ軸坐標(biāo)重新定位元素位置。在此基礎(chǔ)上有兩個(gè)擴(kuò)展函數(shù)：translateX()和translateY()。
scale():用來縮小或放大元素，可以使用元素尺寸發(fā)生變化。在此基礎(chǔ)上有兩個(gè)擴(kuò)展函數(shù)：scaleX()和scaleY()。
rotate()：用來旋轉(zhuǎn)元素。
skew()：用來讓元素傾斜。在此基礎(chǔ)上有兩個(gè)擴(kuò)展函數(shù)：skewX()和skewY()。
matrix()：定義矩陣變形，基于X軸和Y軸坐標(biāo)重新定位元素位置。3D transform常用的transform-function的功能:
translate3d()：移元素元素，用來指定一個(gè)3D變形移動(dòng)位移量
translate()：指定3Ｄ位移在Ｚ軸的位移量。
scale3d()：用來縮放一個(gè)元素。
scaleZ():指定Z軸的縮放向量。
rotate3d()：指定元素具有一個(gè)三維旋轉(zhuǎn)的角度
rotateX()、rotateY()和rotateZ()：讓元素具有一個(gè)旋轉(zhuǎn)角度。
perspective()：指定一個(gè)透視投影矩陣。
matrix3d()：定義矩陣變形。
transform-origin屬性
- 默認(rèn)情況，變形的原點(diǎn)在元素的中心點(diǎn)，或者是元素X軸和Y軸的50%處，如下圖所示：
- 我們沒有使用
transform-origin改變元素原點(diǎn)位置的情況下，CSS變形進(jìn)行的旋轉(zhuǎn)、移位、縮放等操作都是以元素自己中心（變形原點(diǎn)）位置進(jìn)行變形的。但很多時(shí)候需要在不同的位置對元素進(jìn)行變形操作，我們就可以使用transform-origin來對元素進(jìn)行原點(diǎn)位置改變，使元素原點(diǎn)不在元素的中心位置，以達(dá)到需要的原點(diǎn)位置。 - 如果我們把元素變換原點(diǎn)（transform-origin）設(shè)置0（x） 0（y），這個(gè)時(shí)候元素的變換原點(diǎn)轉(zhuǎn)換到元素的左頂角處，如下圖所示：
正如上圖所示，改變transform-origin屬性的X軸和Ｙ軸的值就可以重置元素變形原點(diǎn)位置，
其基本語法如下所示:
transform-origin：[<percentage> | <length> | left | center | right | top | bottom] | [<percentage> | <length> | left | center | right] | [[<percentage> | <length> | left | center | right] && [<percentage> | <length> | top | center | bottom]] <length> ?可以將語法拆分成：
/*只設(shè)置一個(gè)值的語法*/transform-origin: x-offsettransform-origin:offset-keyword/*設(shè)置兩個(gè)值的語法*/transform-origin：x-offset y-offsettransform-origin：y-offset x-offset-keywordtransform-origin：x-offset-keyword y-offsettransform-origin：x-offset-keyword y-offset-keywordtransform-origin：y-offset-keyword x-offset-keyword/*設(shè)置三個(gè)值的語法*/transform-origin：x-offset y-offset z-offsettransform-origin：y-offset x-offset-keyword z-offsettransform-origin：x-offset-keyword y-offset z-offsettransform-origin：x-offset-keyword y-offset-keyword z-offsettransform-origin：y-offset-keyword x-offset-keyword z-offsettransform-origin屬性值可以是百分比、em、px等具體的值，也可以是top、right、bottom、left和center這樣的關(guān)鍵詞。2D的變形中的transform-origin
屬性可以是一個(gè)參數(shù)值，也可以是兩個(gè)參數(shù)值。如果是兩個(gè)參數(shù)值時(shí)，第一值設(shè)置水平方向X軸的位置，第二個(gè)值是用來設(shè)置垂直方向Ｙ軸的位置。3D的變形中的transform-origin
屬性還包括了Ｚ軸的第三個(gè)值。其各個(gè)值的取值簡單說明如下：
x-offset：用來設(shè)置transform-origin水平方向Ｘ軸的偏移量，可以使用<length>和<percentage>值，同時(shí)也可以是正值（從中心點(diǎn)沿水平方向Ｘ軸向右偏移量），也可以是負(fù)值（從中心點(diǎn)沿水平方向Ｘ軸向左偏移量）。
offset-keyword：是top、right、bottom、left或center中的一個(gè)關(guān)鍵詞，可以用來設(shè)置transform-origin的偏移量。
y-offset：用來設(shè)置transform-origin屬性在垂直方向Ｙ軸的偏移量，可以使用<length>和<percentage>值，同時(shí)可以是正值（從中心點(diǎn)沿垂直方向Ｙ軸向下的偏移量），也可以是負(fù)值（從中心點(diǎn)沿垂直方向Ｙ軸向上的偏移量）。
x-offset-keyword：是left、right或center中的一個(gè)關(guān)鍵詞，可以用來設(shè)置transform-origin屬性值在水平Ｘ軸的偏移量。
y-offset-keyword：是top、bottom或center中的一個(gè)關(guān)鍵詞，可以用來設(shè)置transform-origin屬性值在垂直方向Ｙ軸的偏移量。
z-offset：用來設(shè)置3D變形中transform-origin遠(yuǎn)離用戶眼睛視點(diǎn)的距離，默認(rèn)值z=0，其取值可以<length>，不過<percentage>在這里將無效。看上去transform-origin
取值與background-position
取值類似。為了方便記憶，可以把關(guān)鍵詞和百分比值對比起來記：
right = right center = center right = 100%或(100% 50%)
bottom = bottom center = center bottom = 50% 100%
left = left center = center left = 0或(0 50%)
center = center center = 50%或（50% 50%）
top left = left top = 0 0
right top = top right = 100% 0
bottom right = right bottom = 100% 100%
bottom left = left bottom = 0 100%```
>以transform中的旋轉(zhuǎn)rotate()為例，并transform-origin取值不一樣時(shí)的效果：
* transform-origin取值為center（或center center或50% 或50% 50%）：
* transform-origin取值為top（或top center或center top或50％ 0）：
* transform-origin取值為right(或right center 或center right 或 100％ 或 100％ 50％)：
* transform-origin取值為bottom(或bottom center 或center bottom 或 50％ 100％)：
* transform-origin取值為left(或left center或center left或0或0 50％):
* transform-origin取值為top left(或left top或0 0)：
* transform-origin取值為right top（或top right或100％ 0）：
* transform-origin取值為bottom right（或right bottom或100％ 100％）:
* transform-origin取值為left bottom（或bottom left 或 0 100％）:
>CSS3變形中旋轉(zhuǎn)、縮放、傾斜都可以通過`transform-origin`屬性重置元素的原點(diǎn)，但其中的位移`translate()`始終以元素中心點(diǎn)進(jìn)行位移。例如下面的兩段代碼的演示過程：
```div { -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: translate(40px, 40px) translate(-50px, 35px) translateY(30px); -moz-transform: translate(40px, 40px) translate(-50px, 35px) translateY(30px); -o-transform: translate(40px, 40px) translate(-50px, 35px) translateY(30px); -ms-transform: translate(40px, 40px) translate(-50px, 35px) translateY(30px); transform: translate(40px, 40px) translate(-50px, 35px) translateY(30px);}```
接下來通過transform-origin將變形原點(diǎn)設(shè)置為100% 100%:
```div { -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: translate(40px, 40px) translate(-50px, 35px) translateY(30px); -moz-transform: translate(40px, 40px) translate(-50px, 35px) translateY(30px); -o-transform: translate(40px, 40px) translate(-50px, 35px) translateY(30px); -ms-transform: translate(40px, 40px) translate(-50px, 35px) translateY(30px); transform: translate(40px, 40px) translate(-50px, 35px) translateY(30px);}```
雖然元素的變形原點(diǎn)通過 ` transform-origin` 從50% 50%變成100% 100%，但元素位移`translate()`始終是依元素中心點(diǎn)進(jìn)行位移，如下圖所示：
>到目前為止，transform-origin
屬性在現(xiàn)代主流瀏覽器得到很好的支持，但在一些瀏覽器之下依然需要添加各瀏覽器私有屬性，詳細(xì)情況如下所示:
* 2D變形中transform-origin需要添加瀏覽器私有屬性版本：
* IE9+、Firefox3.5+、Chrome4+、Safari3.1+、Opera10.5+；iOS Safari3.2+、Android Browser2.1+、Blackberry Browser7.0+、Chrome for Android25.0+。
* 2D變形中transform-origin支持W3C標(biāo)準(zhǔn)規(guī)范的瀏覽器：IE10+、Firefox16+、Opera12.1+；Opera Mobile11.0+、Firefox for Android19.0。
* 3D變形中transform-origin需要添加瀏覽器私有屬性版本：IE10+、Firefox10+、Chrome12+、Safari4+、Opera15+、iOS Safari3.2+、Android Browser3.0+、Blackberry Browser7.0+、Opera Mobile14.0+、Chrome for Android25.0+。
* 3D變形中transform-origin支持W3C標(biāo)準(zhǔn)規(guī)范的瀏覽器:Firefox16+、Firefox for Android19+
>通過`transform-origin`屬性改變元素的原點(diǎn)，可以實(shí)現(xiàn)不同的變形效果，下面的示例中我們分別演示了改變元素原點(diǎn)前后，CSS3變形各函數(shù)對圖像變形操作。
* 為了能更具有對比性，下面的示例中有兩個(gè)div，每個(gè)div各有5個(gè)img，而第一個(gè)div是指transform-origin為默認(rèn)值時(shí)效果，第二個(gè)div是指transform-origin修改后在不同transform函數(shù)中效果。
```<div> <img src="images/cardKingClub.png" alt="" width="142" height="200" /> <img src="images/cardKingClub.png" alt="" width="142" height="200" /> <img src="images/cardKingClub.png" alt="" width="142" height="200" /> <img src="images/cardKingClub.png" alt="" width="142" height="200" /> <img src="images/cardKingClub.png" alt="" width="142" height="200" /></div><div> <img src="images/cardKingClub.png" alt="" width="142" height="200" /> <img src="images/cardKingClub.png" alt="" width="142" height="200" /> <img src="images/cardKingClub.png" alt="" width="142" height="200" /> <img src="images/cardKingClub.png" alt="" width="142" height="200" /> <img src="images/cardKingClub.png" alt="" width="142" height="200" /></div>```
* 默認(rèn)樣式：
```div { width: 500px; height: 300px; margin: 30px auto; position: relative; background: url(images/bg-grid.jpg) no-repeat center center; background-size: 100% 100%;}div img { position: absolute; top: 50%; left: 50%; margin-left: -71px; margin-top: -100px; }```
* 首先來看transform-origin屬性改變元素原點(diǎn)前后rotate()函數(shù)對圖像的旋轉(zhuǎn)效果：
```div img:nth-child(1){ opacity: .5; z-index: 1; transform: rotate(10deg);}div img:nth-child(2){ opacity: .6; z-index: 2; transform: rotate(25deg);}div img:nth-child(3){ opacity: .7; z-index: 3; transform: rotate(35deg);}div img:nth-child(4){ opacity: .8; z-index: 4; transform: rotate(45deg);}div img:nth-child(5){ z-index: 5; transform: rotate(60deg);}div:nth-of-type(2) img { transform-origin: bottom;}```
* 上面實(shí)例演示了變形中旋轉(zhuǎn)rotate()函數(shù)圍繞不同原點(diǎn)旋轉(zhuǎn)的效果，第一個(gè)容器div中的圖片圍繞圖片默認(rèn)原點(diǎn)（中心）旋轉(zhuǎn)過程；而第二個(gè)容器div中的圖片經(jīng)transform-origin屬性將圖片原點(diǎn)從中心點(diǎn)（center）修改為底部中心點(diǎn)（bottom）旋轉(zhuǎn)過程：
* 接下來，我們在來看transform-origin修改原點(diǎn)前后，CSS3變形中傾斜skew()函數(shù)對圖片變形的過程：
```div img:nth-child(1){ opacity: .5; z-index: 1; transform: skewX(10deg);}div img:nth-child(2){ opacity: .6; z-index: 2; transform: skewX(15deg);}div img:nth-child(3){ opacity: .7; z-index: 3; transform: skewX(20deg);}div img:nth-child(4){ opacity: .8; z-index: 4; transform: skewX(25deg);}div img:nth-child(5){ z-index: 5; transform: skewX(30deg);}div:nth-of-type(2) img { transform-origin: bottom;}```
* 上面兩個(gè)例子簡單的演示了變形中的rotate()和skew()函數(shù)都可以通過transform-origin屬性改變對象原點(diǎn)，讓對象根據(jù)不同的原點(diǎn)進(jìn)行變形。接來我繼續(xù)向大家演示變形中的縮放scale()函數(shù)在不同原點(diǎn)產(chǎn)生變形效果：
```div img:nth-child(1){ opacity: .5; z-index: 1; transform: scale(1.2);}div img:nth-child(2){ opacity: .6; z-index: 2; transform: scale(1.1);}div img:nth-child(3){ opacity: .7; z-index: 3; transform: scale(.9);}div img:nth-child(4){ opacity: .8; z-index: 4; transform: scale(.8);}div img:nth-child(5){ z-index: 5; transform: scale(.6);}div:nth-of-type(2) img { transform-origin: right;}```
*上面三個(gè)簡單實(shí)例再次驗(yàn)證了CSS3變形中的旋轉(zhuǎn)rotate()、縮放scale()和傾斜skew()函數(shù)都可以通過transform-origin屬性來改變元素對象的原點(diǎn)位置。但是transform-origin屬性改變元素對像原點(diǎn)位置，位移translate()函數(shù)始終會(huì)根據(jù)元素對像中心點(diǎn)進(jìn)行位移。
*前面演示的只是2D變形中transform-origin用來修改元素對象原點(diǎn)，以及對各種變形函數(shù)產(chǎn)生的不同效果。接下來，在來看一個(gè)簡單的實(shí)例，演示一下3D變形中transform-origin修改元素原點(diǎn)的3D旋轉(zhuǎn)效果。
```div img { position: absolute; top: 50%; left: 50%; margin-left: -71px; margin-top: -100px; backface-visibility: visible; transform: perspective(500px);}div img:nth-child(1){ opacity: .5; z-index: 1; transform: rotate3d(1, 1, 1,10deg);}div img:nth-child(2){ opacity: .6; z-index: 2; transform: rotate3d(1, 1, 1,25deg);}div img:nth-child(3){ opacity: .7; z-index: 3; transform: rotate3d(1, 1, 1,35deg);}div img:nth-child(4){ opacity: .8; z-index: 4; transform: rotate3d(1, 1, 1,45deg);}div img:nth-child(5){ z-index: 5; transform: rotate3d(1, 1, 1,60deg);}div:nth-of-type(2) img { transform-origin: left bottom -50px;}```
轉(zhuǎn)自：[http://www.w3cplus.com/css3/transform-origin.html](http://www.w3cplus.com/css3/transform-origin.html)
