transform 2D(變換)
transform是CSS3中所提供的變換特效
<!DOCTYPE html> <html> <head> <style> div { width: 200px; height: 100px; background-color: yellow; /* Rotate div */ -ms-transform: rotate(7deg); /* IE 9 */ -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */ transform: rotate(7deg); } </style> </head> <body> <div>Hello</div> <br> <p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the transform property.</p> <p><b>Note:</b> Internet Explorer 9 supports an alternative, the -ms-transform property. Newer versions of IE support the transform property (do not need the ms prefix).</p> <p><b>Note:</b> Chrome, Safari and Opera supports an alternative, the -webkit-transform property.</p> </body> </html>
prefix前輟詞：
prefix前輟詞或叫廠商辨識詞 (vendor identifier) ，
瀏覽器廠商為了搶先支援 W3C未正式發佈的規範或更好的瀏覽器相容性，也會先以擴充特性來處理。
例如：
-ms-transform
-webkit-transform
-moz-transform
-o-transform
一、2D Transform 屬性
1、translate 位移
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 75px; background-color: red; border: 1px solid black; } div#div2 { -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Chrome, Safari, Opera */ transform: translate(50px,100px); /* Standard syntax */ } </style> </head> <body> <div>Hello. This is a DIV element.</div> <div id="div2">Hello. This is a DIV element.</div> </body> </html>
此動作為div2向右偏移50px，並向下偏移100px，
該功能就是對指定的元素做偏移動作，功能跟left、right、top、bottom一樣，
但使用translate的效能會比較好，參考jsFiddle Demo for mobile devices
translate 有個特別的地方，就是可以使用百分比，
例如：
a、
transform: translateX(100%);
即表示X軸水平位移多少則是根據元素本身的 width * 100% 來決定的，
當 width : 100px 時，則X軸水平位移100px。
b、
transform: translateY(40%);
即表示Y軸垂直位移多少則是根據元素本身的 height * 40% 來決定的，
當 height : 75px 時，則Y軸垂直位移30px。
而 transform: translate(value_1 , value_2); 則同時具有
translateX(value_1) 與 translateY(value_2) 功能。
例如：
transform: translate(100%,100%);
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 75px; background-color: red; border: 1px solid black; position: absolute; } .translate { transform: translate(100%,100%); /* Standard syntax */ } </style> </head> <body> <div>Hello. This is a DIV element.</div> <div class="translate">Hello. This is a DIV element.</div> </body> </html>
2、rotate 旋轉
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 75px; background-color: red; border: 1px solid black; } div#div2 { -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */ transform: rotate(30deg); /* Standard syntax */ } </style> </head> <body> <div>Hello. This is a DIV element.</div> <div id="div2">Hello. This is a DIV element.</div> </body> </html>
該功能就是對指定的元素做旋轉動作，可做順時鐘或逆時鐘平面旋轉。
另外要注意的是，如果想要對行內元素使用旋轉特效，
則要先對行內元素的display屬性使用inline-bolck或block，
使其有自已的寬度，才能成功做出旋轉特效。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Brooke Shieh</title> <style> .year { display: inline-block; transition: all 0.5s ease-in-out; } .year:hover { transform: rotate(-180deg); } i { /*display: inline-block;*/ transition: all 0.5s ease-in-out; } i:hover { transform: rotate(-180deg); } </style> </head> <body> <div class="example-date"> <span class="day">31</span> <span class="month">July</span> <span class="year">2009</span> <i>aaa</i> </div> </body> </html>
3、scale 縮放
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 75px; background-color: red; border: 1px solid black; } div#div2 { margin: 100px; -ms-transform: scale(2,4); /* IE 9 */ -webkit-transform: scale(2,4); /* Chrome, Safari, Opera */ transform: scale(2,4); /* Standard syntax */ } </style> </head> <body> <div>Hello. This is a DIV element.</div> <div id="div2">Hello. This is a DIV element.</div> </body> </html>
該功能就是對指定的元素做原點縮放動作，可個別做水平或垂直N倍縮放動作。
也可以個別對X軸或Y軸做處理如：
transform: scaleX(n);、transform: scaleY(n);
4、skew()
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 75px; background-color: red; border: 1px solid black; margin: 100px; } div#div2 { -ms-transform: skew(60deg,60deg); /* IE 9 */ -webkit-transform: skew(60deg,60deg); /* Chrome, Safari, Opera */ transform: skew(60deg,60deg); /* Standard syntax */ } </style> </head> <body> <div id="div2">Hello. This is a DIV element.</div> </body> </html>
該功能就是對指定的元素使之向X軸或向Y軸做傾斜動作，參考以下示意圖
也可以個別對X軸或Y軸做處理如：
transform: skewX(deg);、transform: skewY(deg);
5、matrix()
transform也提供矩陣來實作偏移、旋轉、縮放、扭曲動作，只是一般開發者不太會經由這方式來實作。
P.S. 如果你有學過線性代數的話，那你就會操作他了。
6、transform-origin
transform-origin 是用來跟 transform: rotate(deg) 屬性配合，
其功能用來設定旋轉的中心點，其數值可為百分比、名稱、長度。
例如：
transform-origin: 50% 50%;就是一個block的中心點，並且是transform-origin的預設值，
也可以寫為transform-origin: center center;，
transform-origin: 0% 0%;就是等於transform-origin: left top;，
transform-origin: 100% 100%;就是等於transform-origin: right bottom;。
範例如下：
<!DOCTYPE html> <html> <head> <style> .parent { height: 200px; width: 200px; margin: 100px; border: 1px solid black; } .child { height: 100px; width: 100px; border: 1px solid black; background-color: red; } .corner { border-radius: 10px; background: #73AD21; width: 10px; height: 10px; } @keyframes rotate_45 { 100% { transform: rotate(45deg); } } /*ex-1*/ #ex-1 { transform-origin: 0 0; animation-name: rotate_45; animation-duration: 5s; animation-iteration-count: 3; } #corner-1 { margin: calc(0 - 10px / 2) 0 0 calc(0 - 10px / 2); } /*ex-2*/ #ex-2 { transform-origin: 50% 50%; animation-name: rotate_45; animation-duration: 5s; animation-iteration-count: 3; } #corner-2 { margin: calc(50px - 10px / 2) 0 0 calc(50px - 10px / 2); } /*ex-3*/ #ex-3 { transform-origin: 100% 100%; animation-name: rotate_45; animation-duration: 5s; animation-iteration-count: 3; } #corner-3 { margin: calc(100px - 10px / 2) 0 0 calc(100px - 10px / 2); } </style> </head> <body> <div class="parent"> <div id="ex-1" class="child"> <div id="corner-1" class="corner"></div> </div> </div> <div class="parent"> <div id="ex-2" class="child"> <div id="corner-2" class="corner"></div> </div> </div> <div class="parent"> <div id="ex-3" class="child"> <div id="corner-3" class="corner"></div> </div> </div></body>
</html>
參考資料：