使用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  /*更換變形原點*/ } /style  /body  /html 

這個參數可以改變變形基點，其屬性值表示“基準點在元素水平方向上的位置，基準點在元素垂直方向上的位置”。其中“基準點在元素水平方向上的位置”中可以指定的值為left，center，right，“基準點在元素垂直方向上的位置”中可以指定的值為top，center，bottom。

以上就是CSS3中關于變形的一些處理的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。