CSS3中的變形處理
阿新 • • 發佈：2017-06-27
left rotate ext 圖像 ble 例如 一個 clas -i
變形分類
-
縮放
使用scale方法來實現文字或圖像的縮放，在參數中指定縮放倍率。例如“scale（0.5）”，表示縮小50
-
傾斜
使用skew方法來實現文字或圖像的縮放，在參數中指定水平方向的傾斜角度與垂直方向的傾斜角度，若只有一個數值，則為水平方向的傾斜角度，單位為deg。
註：rotate表示的是旋轉，僅一個數值，表示水平方向的旋轉角度。
-
移動
使用translate方法來實現文字或圖像的移動，在參數中指定水平方向的移動與垂直方向的移動，若只有一個數值，則為水平方向的移動。
對一個元素的多種變形方法
-
格式示例
1 <!DOCTYPE html> 2 <
html lang="zh-CN"> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">7 <title>測試</title> 8 </head> 9 <body> 10 <h3>變形分類</h3> 11 <section id="a-section1-3-b">a-section1-3-b</section> 12 <section id="section1-4-b">section1-4-b</section> 13 <style> 14 [id $= ‘b‘]{ /* id以b結尾的 */ 15 background-color: lightpink; 16 -webkit-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px); 17 -moz-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px); 18 -ms-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px); 19 -o-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px); 20 transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px); 21 /*縮小50% 水平垂直方向傾斜30°（rotate只有水平旋轉） 水平垂直移動30px*/ 22 } 23 #a-section1-3-b{ 24 -webkit-transform-origin: left bottom; 25 -moz-transform-origin: left bottom; 26 -ms-transform-origin: left bottom; 27 -o-transform-origin: left bottom; 28 transform-origin: left bottom; 29 /*更換變形原點*/ 30 } 31 </style> 32 </body> 33 </html> -
變形基點transform-origin
這個參數可以改變變形基點，其屬性值表示“基準點在元素水平方向上的位置，基準點在元素垂直方向上的位置”。其中“基準點在元素水平方向上的位置”中可以指定的值為left，center，right，“基準點在元素垂直方向上的位置”中可以指定的值為top，center，bottom。
CSS3中的變形處理