css3中可運用transform屬性來實現讓文字或影象顯示出：旋轉rotate,縮放scale,傾斜skew,移動translate 這些效果。
1. 旋轉rotate
-ms-transform: rotate(30deg) ;
-moz-transform:rotate(30deg);
-webkit-transform:rotate(30deg);
-o-transform:rotate(30deg);
transform:rotate(30deg);
如上rotate(30deg)，30是度數，預設是順時針旋轉，deg是角度單位。角度設為負值時可逆時針旋轉。
2. 縮放scale
-ms-transform: scale(3,2) ;
-moz-transform:scale(3,2);
-webkit-transform:scale(3,2);
-o-transform:scale(3,2);
transform:scale(3,2);
如上scale(x,y),表示使元素的寬度和高度分別變為原來的x倍，y倍。還有僅用於單方向的scalex(x)和scaley(y)可以用。
3. 扭曲skew
-ms-transform: skew(30deg,10deg) ;
-moz-transform:
skew(30deg,10deg)
;-webkit-transform:
skew(30deg,10deg);
-o-transform:
skew(30deg,10deg);
transform:
skew(30deg,10deg);
如上skew(30deg,10deg),表示在水平方向扭曲30度，垂直方向扭曲10度。還有僅用於單方向的skewx(30deg)和skewy(30deg)可用。
4. 位移translate
-ms-transform: translate(100px,50px) ;
-moz-transform:translate(100px,50px);
-webkit-transform:
translate(100px,50px) ;
-o-transform:
translate(100px,50px) ;
transform:
translate(100px,50px) ;
如上translate(100px,50px),表示水平方向右移100px，垂直方向下移50px。還有僅用於單方向的translatex(100px)和translatey(50px)。
5.對同一元素使用rotate,scale,skew,translate多種變形，並列寫下即可
-ms-transform:
translate(100px,50px)
rotate(30deg) skew(30deg,10deg)
;
-moz-transform:translate(100px,50px)
rotate(30deg) skew(30deg,10deg)
; -webkit-transform:translate(100px,50px)
rotate(30deg) skew(30deg,10deg)
;
-o-transform:translate(100px,50px)
rotate(30deg) skew(30deg,10deg)
;
transform: translate(100px,50px) rotate(30deg) skew(30deg,10deg)
; 6.設定元素transform的基點,屬性transform-origin
如rotate時改變旋轉的基點，scale時改變縮放的基點，skew時改變扭曲的基點（translate時無所謂基點）
transform-origin的值有(以逗號分隔)：top left，top, top right, left , center, right, bottom left, bottom, bottom right
如，top left表示元素的最左上角的點， top表示元素頂線**的點， top right表示元素最右上角的點，left表示元素左線中間的點。。。
例子：
**：
原樣div
rotate(30deg) 順時針旋轉30度
scale(3,1.2) 寬變3倍，高變1.2倍
skew(10deg,0deg) 橫向扭曲10度，縱向不扭曲
translate(100px,-50px) 右移100px,上移50px
順時針旋轉30度且寬變3倍，高變1.2倍
CSS3新增屬性用法整理CSS3新增屬性用法整理
css3新增屬性用法整理 css3新增屬性用法整理 1 box shadow 陰影效果 2 border color 為邊框設定多種顏色 3 border image 邊框 4 text shadow 文字陰影 5 text overflow 文字截斷 6 word wrap 自動換行 7 bord...
css3 新增屬性
background origin 背景影象顯示的原點。background clip 規定背景的繪製區域。padding box 從padding區域 含padding 開始顯示背景影象。border box 從border區域 含border 開始顯示背景影象。content box 從cont...
Css3新增屬性
1.新增邊框屬性 box shadow 實現邊框陰影 屬性值有 模糊度 x軸偏移y軸偏移 color 陰影顏色 border radius 實現圓角邊框 屬性值越大角度越大 border image 實現邊框 border image source slice width outset repeat...