CSS3中的變形處理

變形分類

縮放

使用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。

轉載于:https://www.cnblogs.com/tinyTea/p/7084460.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/254223.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/254223.shtml
英文地址，請注明出處：http://en.pswp.cn/news/254223.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！