CSS3 轉換 transform
2D變換方法：一般用於hover
- translate()
- rotate()
- scale()
- skew()
- 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 */}
CSS3 轉換 transform