對元素進行移動、縮放、轉(zhuǎn)動、拉長或拉伸

方法1：translate():

元素從其當前位置移動稳析，根據(jù)給定的 left（x 坐標） 和 top（y 坐標） 位置參數(shù)
有兩個div读慎，它們的css樣式如下：

 1 .before {
 2             width: 70px;
 3             height: 70px;
 4             background-color: #8fbc8f;
 5         }
 6  
 7  .after {
 8             width: 70px;
 9             height: 70px;
10             background-color: #ffe4c4;
11             -webkit-transform: translate(50px, 30px);
12             -moz-transform: translate(50px, 30px);
13             -ms-transform: translate(50px, 30px);
14             -o-transform: translate(50px, 30px);
15             transform: translate(50px, 30px);
16         }

結(jié)果如下：

方法2：rotate()

元素順時針旋轉(zhuǎn)給定的角度恢准。允許負值钧椰，元素將逆時針旋轉(zhuǎn)怨愤。
有兩個div寞缝，它們的css樣式如下

 1 .before {
 2             width: 70px;
 3             height: 70px;
 4             background-color: #8fbc8f;
 5         }
 6  
 7 .after {
 8             width: 70px;
 9             height: 70px;
10             background-color: #ffe4c4;
11             -webkit-transform: rotate(20deg);
12             -moz-transform: rotate(20deg);
13             -ms-transform: rotate(20deg);
14             -o-transform: rotate(20deg);
15             transform: rotate(20deg);
16         }

結(jié)果如下：

方法3：scale()

元素的尺寸會增加或減少癌压，根據(jù)給定的寬度（X 軸）和高度（Y 軸）參數(shù)
有兩個div，它們的css樣式如下：

 1 .before {
 2             width: 70px;
 3             height: 70px;
 4             background-color: #8fbc8f;
 5         }
 6  
 7 .after {
 8             width: 70px;
 9             height: 70px;
10             background-color: #ffe4c4;
11             -webkit-transform: scale(1.5, 0.8);/*寬度變?yōu)樵瓉淼?.5倍第租，高度變?yōu)樵瓉淼?.8倍*/
12             -moz-transform: scale(1.5, 0.8);
13             -ms-transform: scale(1.5, 0.8);
14             -o-transform: scale(1.5, 0.8);
15             transform: scale(1.5, 0.8);
16         }

結(jié)果如下：

方法4：skew()

元素翻轉(zhuǎn)給定的角度措拇，根據(jù)給定的水平線（X 軸）和垂直線（Y 軸）參數(shù)

 1 .before {
 2             width: 70px;
 3             height: 70px;
 4             background-color: #8fbc8f;
 5         }
 6  
 7 .after {
 8             width: 70px;
 9             height: 70px;
10             background-color: #ffe4c4;
11             -webkit-transform: skew(20deg, 20deg);/*圍繞 X 軸把元素翻轉(zhuǎn)20度，圍繞 Y 軸翻轉(zhuǎn)20度*/
12             -moz-transform: skew(20deg, 20deg);
13             -ms-transform: skew(20deg, 20deg);
14             -o-transform: skew(20deg, 20deg);
15             transform: skew(20deg, 20deg);
16         }

結(jié)果如下：

本文作者：王芳