標籤：tom eset 方向 pre lang meta 映像 center type
變形分類使用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>這個參數可以改變變形基點，其屬性值表示“基準點在元素水平方向上的位置，基準點在元素垂直方向上的位置”。其中“基準點在元素水平方向上的位置”中可以指定的值為left，center，right，“基準點在元素垂直方向上的位置”中可以指定的值為top，center，bottom。
CSS3中的變形處理
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
