html5 中 css3 的變形效果，通過變形效果，可以平移、縮放和旋轉元素的功能。
css3 提供了元素變形效果，也叫做變換。它可以將元素實現旋轉、縮放和平移的功能。屬性有兩個：transform和transform-origin。屬性
說明transform
指定應用的變換功能
transform-origin
指定變換的起點
對於 transform 的屬性值，具體如下表：
屬性值說明
none
無變換translate(長度值或百分數值)
在水平方向、垂直方向或兩個方向上平移元素。
translatex(長度值或百分數值)
~translaty(長度值或百分數值)
~scale(數值)
在水平方向、垂直方向或兩個方向上縮放元素
scalex(數值)
~scaley(數值)
~rotate(角度)
旋轉元素
skew(角度)
在水平方向、垂直方向或兩個方向上使元素傾斜一定的角度
skewx(角度)
~skewy(角度)
~matrix(4~6 數值，逗號隔開)
指定自定義變換。
//向水平和垂直各移動 200 畫素，也可以使用百分比
transform
: translate(200px,200px);
//向水平平移 200 畫素，不加後面的 0 也可以
transform
: translate(200px,0);
transform
: translatex(200px);
//向垂直平移 200 畫素
transform
: translate(0,200px);
transform
: translatey(200px);
//水平、垂直方向放大 1.5 倍
transform
: scale(1.5);
transform
: scale(1.5,1.5);
//水平、垂直方向縮小 0.8 倍
transform
: scale(0.8,0.8);
//水平方向放大 1.5 倍
transform
: scalex(1.5);
//垂直方向放大 1.5 倍
transform
: scaley(1.5);
//旋轉元素，0 ~ 360 度之間，負值均可
transform
: rotate(-45deg);
//傾斜元素，0 ~ 360 度之間，負值均可
transform
: skew(45deg, 20deg);
//水平傾斜元素，0 ~ 360 度之間，負值均可
transform
: skewx(45deg);
//垂直傾斜元素，0 ~ 360 度之間，負值均可
transform
: skewy(45deg);
transform
: matrix(1,0,0,1,30,30);
//不同的值可以累計，通過空格分割
transform
: rotate(-45deg)scale(1.5);
說明百分數值
指定元素 x 軸或 y 軸的起點
長度值指定距離
left
指定 x 軸的位置
center
~right
~top
指定 y 軸的位置
center
~bottom
~
這個屬性是用來改變變形的基準點的，預設是在元素的中心位置，如果你改變了基準點。它就會按照這個基準點進行變形。
//預設值，以中心點變形
transform-origin
: center center;
transform-origin
: 50% 50%;
//以左上角為基準點變形
transform-origin
: left top;
transform-origin
: 0px 0px;
支援度opera
firefox
chrome
safari
ie支援需帶字首
11.5 ~ 22
3.5 ~ 15
4 ~ 35
3.1 ~ 8
9.0+
支援不帶字首
23+16+
26+無
10.0+
//相容完整版
-webkit-transform
: rotate(45deg);
-moz-transform
: rotate(45deg);
-o-transform
: rotate(45deg);
-ms-transform
: rotate(45deg);
transform
: rotate(45deg);
-webkit-transform-origin
:left
top;
-moz-transform-origin
: left top;
-o-transform-origin
: lefttop;
-ms-transform-origin
: left top;
transform-origin
: left top;
CSS3變形效果
css3提供了元素變形效果，也叫做變換。它可以將元素實現旋轉 縮放和平移的功能。transform指定應用的變換功能 transform origin指定變換的起點 transform的屬性值 none無變換 translate 長度值或百分數值 兩個方向平移元素 translatex 長度值或百分...
CSS3 變形與動畫效果
1.旋轉rotate 函式通過指定的角度引數使元素相對原點進行旋轉。它主要在二維空間內進行操作，設定乙個角度值，用來指定旋轉的幅度。如果這個值為正值，則元素相對原點中心順時針旋轉 如果這個值為負值，元素相對原點中心逆時針旋轉。transform rotate 20deg 2.扭曲skew 函式能夠讓...
從零開始學習前端開發 17 CSS3背景與漸變
一 css3背景切割 background clip border box padding box content box 作用 用來設定背景的可見區域 a border box 預設值，背景在邊框及邊框以內的區域可見 b padding box 背景在padding及padding以內的區域可見 ...