CSS3中的變形處理
阿新 • • 發佈：2022-05-03
變形分類
- 縮放 使用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 <section id="a-section1-3-b">a-section1-3-b</section> 11 <section id="section1-4-b">section1-4-b</section> 12 <style> 13 [id $= 'b']{ /* id以b結尾的 */ 14 background-color: lightpink; 15 -webkit-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px); 16 -moz-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px); 17 -ms-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px); 18 -o-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px); 19 transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px); 20 /*縮小50% 水平垂直方向傾斜30°（rotate只有水平旋轉） 水平垂直移動30px*/ 21 } 22 #a-section1-3-b{ 23 -webkit-transform-origin: left bottom; 24 -moz-transform-origin: left bottom; 25 -ms-transform-origin: left bottom; 26 -o-transform-origin: left bottom; 27 transform-origin: left bottom; 28 /*更換變形原點*/ 29 } 30 </style> 31 </body> 32 </html>
- 變形基點transform-origin 這個引數可以改變變形基點，其屬性值表示“基準點在元素水平方向上的位置，基準點在元素垂直方向上的位置”。其中“基準點在元素水平方向上的位置”中可以指定的值為left，center，right，“基準點在元素垂直方向上的位置”中可以指定的值為top，center，bottom。