css動畫-2d、3d轉換
2d 轉換
1、translate() 方法
通過 translate() 方法，元素從其當前位置移動，根據給定的 left（x 座標） 和 top（y 座標） 位置引數：
例項
divtransform: translate(50px,100px);
值 translate(50px,100px) 把元素從左側移動 50 畫素，從頂端移動 100 畫素。
2、rotate() 方法
通過 rotate() 方法，元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉。
例項
divtransform: rotate(30deg);
值 rotate(30deg) 把元素順時針旋轉 30 度。
3、scale() 方法
通過 scale() 方法，元素的尺寸會增加或減少，根據給定的寬度（x 軸）和高度（y 軸）引數：
例項
divtransform: scale(2,4);
值 scale(2,4) 把寬度轉換為原始尺寸的 2 倍，把高度轉換為原始高度的 4 倍。
4、skew() 方法
通過 skew() 方法，元素翻轉給定的角度，根據給定的水平線（x 軸）和垂直線（y 軸）引數：
例項
ivtransform: skew(30deg,20deg);
值 skew(30deg,20deg) 圍繞 x 軸把元素翻轉 30 度，圍繞 y 軸翻轉 20 度。
5、matrix() 方法
matrix() 方法把所有 2d 轉換方法組合在一起。
matrix() 方法需要六個引數，包含數學函式，允許您：旋轉、縮放、移動以及傾斜元素。
例項
如何使用 matrix 方法將 div 元素旋轉 30 度：
divtransform:matrix(0.866,0.5,-0.5,0.866,0,0);
這是乙個初始效果
改變後的效果
動畫效果很好玩
放大效果
傾斜效果
3d效果顯示
css旋轉45度 css 漸變過渡2D
一 過渡屬性 transition css3的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在滑鼠劃過 單擊 獲得焦點或對元素任何改變中觸發，並圓滑地以動畫效果改變css的屬性值 過渡屬性需要觸發事件，如 hover 滑鼠劃過事件 1.transition prop...
CSS之2D轉換模組
參考w3手冊 transform 屬性向元素應用從2d 或3d轉換。該屬性允許我們對元素進行旋轉 縮放 移動或者傾斜。預設情況下所有元素都是圍繞z軸進行旋轉，如果想圍繞哪個軸旋轉，那麼只需要在rotate後面加上哪個軸即可。如 transform rotatez 45deg transform ro...
2D位移與旋轉
2d 平面空間的元素變形。由x,y軸決定。變形屬性 transform 屬性 值 transform的屬性值為功能函式。2d的功能函式 2d的位移 2d的旋轉 2d的縮放 2d的傾斜 2d位移 transform translate x,y transform translatex x軸移動的距離 ...