標籤：傾斜 比較 技術分享 har scale height 縮放 com 定義
移動屬性：translate
縮放屬性：scale
旋轉屬性：roate
傾斜屬性：skew
html:定義五個屬性進行比較，鏈入css檔案
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link href="ss.css" type="text/css" rel="stylesheet"></head><body><div class="div1">初始狀態</div><br><div class="div2">移動後的狀態</div><br><div class="div3">旋轉後的狀態</div><br><div class="div4">縮放後的狀態</div><br><div class="div5">傾斜後的狀態</div></body></html>
css檔案：
div{ width: 200px; height:200px; background: #20ff26; margin: auto;}/*水平移動x和y軸的距離，translate（）中第一個參數是x軸移動距離，第二個參數是y軸移動距離*/.div2{transform: translate(100px,100px);}/*旋轉角度，單位是deg*/.div3{transform: rotate(200deg);}/*縮放效果，第一個參數是x軸縮放的倍數，第二個參數是y軸縮放的倍數。大於1是放大，小於1是縮小，1是正常倍數*/.div4{ transform: scale(0.5,0.5);}/*傾斜效果，第一個參數是圍繞x軸旋轉角度，第二個參數是圍繞y軸旋轉角度*/.div5{ transform: skew(10deg,10deg) ;}
實現效果：
CSS動畫：移動、縮放、旋轉、傾斜的實現
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
