css3變形屬性transform,rotate(旋轉),translate(移動),scale(縮放),skew(扭曲),matrix(矩陣)
這個很簡單,就跟border-radius一樣,就是一個引數,同樣是針對不同的瀏覽器有不同的私有屬性。
w3c上的例子是這樣子寫的:·
div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari and Chrome */ -o-transform:rotate(7deg); /* Opera */ }
好吧,我發現我錯了,這玩意還不是一般的容易,還有N多的函式可以使用的啊。具體如下:
Formal grammar: <transform-function> [<transform-function>]* | none
//code from http://caibaojian.com/transform.html transform: none transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0) transform: translate(12px, 50%) transform: translateX(2em) transform: translateY(3in) transform: scale(2, 0.5) transform: scaleX(2) transform: scaleY(0.5) transform: rotate(0.5turn) transform: skewX(30deg) transform: skewY(1.07rad) transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0) transform: translate3d(12px, 50%, 3em) transform: translateZ(2px) transform: scale3d(2.5, 1.2, 0.3) transform: scaleZ(0.3) transform: rotate3d(1, 2.0, 3.0, 10deg) transform: rotateX(10deg) transform: rotateY(10deg) transform: rotateZ(10deg) transform: perspective(17px)transform: translateX(10px) rotate(10deg) translateY(5px) 下面我簡單的介紹幾種比較常用的方法
一、旋轉rotate
rotate(<angle>) :通過指定的角度引數對原元素指定一個 2D rotation (2D 旋轉),需先有-origin屬性的定義。-origin定義的是旋轉的基點,其中angle是指旋轉角度,如果設 置的值為正數表示順時針旋轉,如果設定的值為負數,則表示逆時針旋轉。如:transform:rotate(30deg):
二、移動translate
移動translate我們分為三種情況:translate(x,y)水平方向和垂直方向同時移動(也就是X軸和Y軸同時移動);translateX(x)僅水平方向移動(X軸移動);translateY(Y)僅垂直方向移動(Y軸移動),具體使用方法如下:
transform:translate(100px,20px):
transform:translateX(100px):
transform:translateY(20px):
三、縮放scale
縮放scale和移動translate是極其相似,他也具有三種情況:scale(x,y)使元素水平方向和垂直方向同時縮放(也就是X軸和Y軸同時縮 放);scaleX(x)元素僅水平方向縮放(X軸縮放);scaleY(y)元素僅垂直方向縮放(Y軸縮放),但它們具有相同的縮放中心點和基數,其中 心點就是元素的中心位置,縮放基數為1,如果其值大於1元素就放大,反之其值小於1,元素縮小。下面我們具體來看看這三種情況具體使用方法:
transform:scale(2,1.5):
transform:scaleX(2):
transform:scaleY(2):
四、扭曲skew
扭曲skew和translate、scale一樣同樣具有三種情況:skew(x,y)使元素在水平和垂直方向同時扭曲(X軸和Y軸同時按一定的角度值 進行扭曲變形);skewX(x)僅使元素在水平方向扭曲變形(X軸扭曲變形);skewY(y)僅使元素在垂直方向扭曲變形(Y軸扭曲變形),具體使用 如下:
transform:skew(30deg,10deg):
transform:skewX(30deg)
transform:skewY(10deg)
五、矩陣matrix
matrix(<number>, <number>, <number>, <number>, <number>, <number>)
其他的內容可以看這裡的文章介紹,很詳細:http://www.w3cplus.com/content/css3-transform
來源:前端開發部落格