rotate()
使用transform元素中的rotate方法，元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉。
transform:rotate(11deg);
-ms-transform:rotate(11deg); /* internet explorer */
-moz-transform:rotate(11deg); /* firefox */
-webkit-transform:rotate(11deg); /* safari 和 chrome */
-o-transform:rotate(11deg); /* opera */
通過 translate() 方法，元素從其當前位置移動，根據給定的 left（x 座標） 和 top（y 座標）
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* ie 9 */
-webkit-transform: translate(50px,100px); /* safari and chrome */
-o-transform: translate(50px,100px); /* opera */
-moz-transform: translate(50px,100px); /* firefox */
通過 scale() 方法，元素的尺寸會增加或減少，根據給定的寬度（x 軸）和高度（y 軸）
transform: scale(2,4);
-ms-transform: scale(2,4); /* ie 9 */
-webkit-transform: scale(2,4); /* safari 和 chrome */
-o-transform: scale(2,4); /* opera */
-moz-transform: scale(2,4); /* firefox */
skew() 方法
通過 skew() 方法，元素翻轉給定的角度，根據給定的水平線（x 軸）和垂直線（y 軸）
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* ie 9 */
-webkit-transform: skew(30deg,20deg); /* safari and chrome */
-o-transform: skew(30deg,20deg); /* opera */
-moz-transform: skew(30deg,20deg); /* firefox */
matrix() 方法
matrix() 方法把所有 2d 轉換方法組合在一起。
matrix() 方法需要六個引數，包含數學函式，允許您：旋轉、縮放、移動以及傾斜元素。
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 */
可以使用transform元素中的rotatex()方法,rotatey()方法和rotatez()方法
transform: rotatex(120deg);
-webkit-transform: rotatex(120deg); /* safari 和 chrome */
-moz-transform: rotatex(120deg); /* firefox */
transform: rotatey(130deg);
-webkit-transform: rotatey(130deg); /* safari 和 chrome */
-moz-transform: rotatey(130deg); /* firefox */
transform: rotatez(130deg);
-webkit-transform: rotatez(130deg); /* safari 和 chrome */
-moz-transform: rotatez(130deg); /* firefox */
2D轉換 3D轉換
轉換是使元素改變形狀 尺寸和位置的一種效果。能夠對元素進行移動 縮放 轉動 拉長或拉伸。2d轉換 瀏覽器相容 1 internet explorer 10 firefox 以及 opera 支援 transform 屬性。2 chrome 和 safari 需要字首 webkit 3 interne...
css3的2D和3D效果
2d效果 1.css3過渡，讓動畫更柔和，transition ie10 firefox chrome opera支援，chrome25以及更早版本safari需要新增 webkit transition width 0.5s ease 1s delay transition all 0.5s 常用...
CSS3新增2D和3D屬性
3d變形 css3 transform translatex x transform是css3中具有顛覆性的特徵之一，可以實現元素的位移 旋轉 傾斜 縮放，甚至支援矩陣方式，配合過渡和即將學習的動畫知識，可以取代大量之前只能靠flash才可以實現的效果。變形轉換 transform transfor...