轉換 transform
css
可以對元素進行移動、縮放、轉動、拉長或拉伸html
在CSS中,容許元素實現 2D 和 3D的轉換效果,主要包含 :旋轉,縮放,移動,傾斜 web
2D :元素只能在X軸和Y軸平面上發生變化 瀏覽器
3D :元素還能夠在 Z軸上發生變化ide
取值:函數
none:無轉換spa
2D Transform Functions:3d
matrix():orm
以一個含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換,至關於直接應用一個[a,b,c,d,e,f]變換矩陣htm
translate():
指定對象的2D translation(2D平移)。第一個參數對應X軸,第二個參數對應Y軸。若是第二個參數未提供,則默認值爲0
translatex():
指定對象X軸(水平方向)的平移
translatey():
指定對象Y軸(垂直方向)的平移
rotate():
指定對象的2D rotation(2D旋轉),需先有 <' transform-origin '> 屬性的定義
scale():
指定對象的2D scale(2D縮放)。第一個參數對應X軸,第二個參數對應Y軸。若是第二個參數未提供,則默認取第一個參數的值
scalex():
指定對象X軸的(水平方向)縮放
scaley():
指定對象Y軸的(垂直方向)縮放
skew():
指定對象skew transformation(斜切扭曲)。第一個參數對應X軸,第二個參數對應Y軸。若是第二個參數未提供,則默認值爲0
skewx():
指定對象X軸的(水平方向)扭曲
skewy():
指定對象Y軸的(垂直方向)扭曲
3D Transform Functions:
matrix3d():
以一個4x4矩陣的形式指定一個3D變換
translate3d():
指定對象的3D位移。第1個參數對應X軸,第2個參數對應Y軸,第3個參數對應Z軸,參數不容許省略
translatez():
指定對象Z軸的平移
rotate3d():
指定對象的3D旋轉角度,其中前3個參數分別表示旋轉的方向x,y,z,第4個參數表示旋轉的角度,參數不容許省略
rotatex():
指定對象在x軸上的旋轉角度
rotatey():
指定對象在y軸上的旋轉角度
rotatez():
指定對象在z軸上的旋轉角度
scale3d():
指定對象的3D縮放。第1個參數對應X軸,第2個參數對應Y軸,第3個參數對應Z軸,參數不容許省略
scalez():
指定對象的z軸縮放
perspective():
指定透視距離
一、2D轉換
使元素在x軸 和 y軸上所進行的轉換效果能夠稱之爲2D轉換,包括:位移、縮放、旋轉、傾斜
1-一、位移 translate()
讓元素產生一個位置的移動變化效果
函數:translate(一個值) -->只在x軸位移距離
translate(值1,值2) --> 在x軸和y軸的位移距離
取值:數值 | 百分比,能夠取負值
x爲正,則向右移動; x爲負,則向左移動。
y爲正,則向下移動; y爲負,則向上移動。
代碼示例以下:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>位移</title> <style> div{ width:100px; height:100px; /*絕對定位*/ position:absolute; top:0; left:0; } #d1{ border:1px dotted #333; } #d2{ border:1px solid #f00; background-color:#ddd; opacity:0.5; /*位移*/ -webkit-transform:translate(50px,50px); -moz-transform:translate(50px,50px); -ms-transform:translate(50px,50px); transform:translate(50px,50px); } </style> </head> <body> <div id="d1"></div> <div id="d2"></div> </body> </html>
1-二、縮放 scale()
改變元素的大小稱之爲 縮放
函數:scale(), scale(x), scale(x,y)
注意:若是隻給一個值,那麼,第二個默認與第一個值相等
取值:默認值爲1
縮小:0到1之間的數值
放大:大於1的數值
代碼示例以下:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>位移</title> <style> div{ width:200px; height:200px; /*絕對定位*/ position:absolute; top:300px; left:400px; } #d1{ border:1px dotted #333; } #d2{ border:1px solid #f00; background-color:#ddd; opacity:0.5; /*縮放*/ -webkit-transform:scaleX(1.5); -moz-transform:scaleX(1.5); -ms-transform:scaleX(1.5); transform:scaleX(1.5); } </style> </head> <body> <div id="d1">原始元素</div> <div id="d2">縮放元素</div> </body> </html>
1-三、旋轉 rotate( )
使元素圍繞着一個點(轉換原點)實現角度的變化 稱之爲 旋轉
函數:rotate( ndeg )
注意:需先指定旋轉原點 <transform-origin>
取值:n取值爲正,按順時針旋轉; n取值爲負,按逆時針旋轉
不指定旋轉原點,即按元素中心旋轉:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>位移</title> <style> div{ width:200px; height:200px; /*絕對定位*/ position:absolute; top:300px; left:400px; } #d1{ border:1px dotted #333; } #d2{ border:1px solid #f00; background-color:#ddd; opacity:0.5; /*位移*/ -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); } </style> </head> <body> <div id="d1">原始元素</div> <div id="d2">旋轉元素</div> </body> </html>
也可改變默認轉換原點:
<style> div{ width:200px; height:200px; /*絕對定位*/ position:absolute; top:300px; left:400px; } #d1{ border:1px dotted #333; } #d2{ border:1px solid #f00; background-color:#ddd; opacity:0.5; /*更改轉換原點*/ -webkit-transform-origin:0px 0px; -moz-transform-origin:0px 0px; -ms-transform-origin:0px 0px; /*位移*/ -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); } </style>
1-四、傾斜 skew( )
可以改變元素的形狀,以原點位置,讓元素圍繞着 x軸 或 y軸 按照必定的角度傾斜
函數: skew( x,y) , skew( x ) <==> skewX( ndeg ) , skewY( ndeg )
取值:角度
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>位移</title> <style> div{ width:200px; height:200px; /*絕對定位*/ position:absolute; top:300px; left:400px; } #d1{ border:1px dotted #333; } #d2{ border:1px solid #f00; background-color:#ddd; opacity:0.5; /*向x軸傾斜30deg*/ -webkit-transform:skew(30deg); -moz-transform:skew(30deg); -ms-transform:skew(30deg); transform:skew(30deg); } </style> </head> <body> <div id="d1">原始元素</div> <div id="d2">傾斜元素</div> </body> </html>
二、3D轉換
在 x軸 和 y軸的基礎上,增長對 z軸(空間軸)的轉換效果
2-一、perspective 屬性
3D元素的透視效果,假定 人眼 到投射平面的距離
注意:(1)、使用 perspective屬性,元素自己不會獲得3D轉換效果,其子元素纔有3D轉換效果
(2)、瀏覽器兼容性,需帶前綴 -webkit-perspective, -moz-perspective, 沒有-ms-
2-二、3D轉換--旋轉
函數:rotateX( xdeg ) rotateY( ydeg ) rotateZ( zdeg )
rotate3d(x,y,z,deg) x,y,z 大於0,即表示該軸參與旋轉
rotate3d(1,1,1,45deg); --> rotateX(45deg) rotateY(45deg) rotateZ(45deg);
rotate3d(1,0,0,45deg); --> rotateX(45deg);
代碼示例以下:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> #parent{ width:200px; height:200px; border:1px solid #ddd; margin:100px auto; /*一、perspective:定義 人眼 到投射平面的距離*/ -webkit-perspective:1200px; -moz-perspective:1200px; perspective:1200px; } #son{ width:100px; height:100px; margin:50px auto; background-color:#e4393c; /*3D轉換-旋轉*/ -webkit-transform:rotate3d(1,1,1,45deg); -moz-transform:rotate3d(1,1,1,45deg); -ms-transform:rotate3d(1,1,1,45deg); transform:rotate3d(1,1,1,45deg); } </style> </head> <body> <!-- 父元素設置 perspective , 子元素實現3d轉換 --> <div id="parent"> <div id="son">3d轉換元素</div> </div> </body> </html>
2-三、3D轉換--位移
在2D基礎上,增長了對 z軸上的位移距離
函數:
translateZ( zdeg )
取值爲正:向着人眼方向移動,物體越大
取值爲負:遠離人眼方向,物體越小
translate3d(x,y,z):左右,上下,先後
2-四、transform-style 屬性
做用:如何在3D空間中,呈現被嵌套的元素
規範了當前元素的子元素,呈現什麼樣的位置顯示
取值:
flat:子元素將不保留其3D位置,呈D位置顯示
preserve-3d:子元素將保留其3D位置
轉換的原點 transform-origin
默認位置:原點是在元素的中心位置
取值:數值 | 百分比 | 關鍵字
兩個值:表示x軸 和 y軸的位置
三個值:表示x軸,y軸,z軸
兼容性: