matrix()1、translate()方法 ---移動
translate()方法,根據左(X軸)和頂部(Y軸)位置給定的參數,從當前元素位置移動
執行個體
translate值(50px,100px)是從左邊元素移動50個像素,並從頂部移動100像素
div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px);/* IE 9 */
-webkit-transform: translate(50px,100px);/* Safari and Chrome */
}
2、rotate()方法 ---旋轉
rotate()方法,在一個給定度數順時針旋轉的元素。負值是允許的,這樣是元素逆時針旋轉
執行個體
rotate值(30deg)元素順時針旋轉30度
div:hover
{
transform: rotate(30deg);
-ms-transform: rotate(30deg);/* IE 9 */
-webkit-transform: rotate(30deg);/* Safari and Chrome */
}
3、scale()方法 ----放大(縮小)
scale()方法,該元素增加或減少的大小,取決於寬度(X軸)和高度(Y軸)的參數:
執行個體
scale(2,4)轉變寬度為原來的大小的2倍,和其原始大小4倍的高度
div
:hover
{
transform: scale(2,4); /* 1.1 */
-ms-transform: scale(2,4);/* IE 9 */
-webkit-transform: scale(2,4);/* Safari and Chrome */
}
4、skew()方法 ---傾斜
skew()方法,該元素會根據橫向(X軸)和垂直(Y軸)線參數給定角度:
執行個體
skew(30deg,20deg)是繞X軸和Y軸周圍20度30度的元素
div
:hover
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg);/* IE 9 */
-webkit-transform: skew(30deg,20deg);/* Safari and Chrome */
}
matrix()方法
matrix()方法把所有2D轉換方法組合在一起。
matrix()方法需要六個參數,包含數學函數,允許您:旋轉、縮放、移動以及傾斜元素。
執行個體 如何使用 matrix 方法將 div 元素旋轉30度:
div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);/* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);/* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);/* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);/* Opera */
}