單個測試 原圖
單個測試 rotate
單個測試 原圖
單個測試 scale
總結：scalex();scaley();可以這兩個這樣單獨的設定，就可以單獨設定是x軸縮放還是y軸縮放了，或者設定兩個值得時候，其中乙個設為0也可以這種效果*/
單個測試 原圖
單個測試 translate
總結：如果你全部寫完了，但是效果還是出不來，發現**也不報錯，那請你檢查一下translate屬性的括號中是否有逗號，總是把這個逗號丟掉，沒有逗號，不報錯也不顯示效果,這真可怕！！translate(xpx,ypx);
單個測試 原圖
單個測試 skew
總結：skewx();skewy();可以這兩個這樣單獨的設定，就可以單獨設定是x軸傾斜還是y軸傾斜了，或者設定兩個值得時候，其中乙個設為0也可以這種效果*/
注意：這幾個變形使用的順序不一樣，效果也不一樣.對比如下，很明顯啊
綜合使用效果 原圖
綜合使用效果-順序1
綜合使用效果-順序2
綜合使用效果-順序3
總結：2和3的效果一樣，看來，只要平移和旋轉的前後順序有調整就會有變化，不關縮放的事情
這是因為
1.元素的中心點總是在最中間的，而水平平移的方向也是左右，垂直平移的方向是上下。如果先平移，元素的水平和垂直的準線還是和二維座標的xy軸平行的。自然最後旋轉是從中心點旋轉不會有影響。
2.但是若先旋轉，那麼元素的水平線和垂直線都發生了轉動，再進行平移的話，就是在旋轉後的方向基礎上向前移動。具體見下圖
先平移後旋轉
先旋轉後平移
我是沒有設定origin的
我是設定了origin的
總結：共有兩個屬性需要填寫《水平，垂直》：水平有三個點：left，center，right；垂直的有三個點：top，center，bottom
最後綜合，來個滑鼠移動上去變換效果
2016.08.10 00:06;by xing.orgl^
CSS3 transform 變形金剛
transform可以對元素進行角度旋轉和縮放,請使用webkit核心最新版瀏覽器瀏覽該文章以保證css3效果能夠完全呈現 有五種變形樣式，可以重疊多種變形樣式，以空格分隔 瀏覽器支援情況 webkit transform,moz transform,o transform,目前對css3動畫支援的...
CSS3 Transform變形（3D轉換）
三維變換使用基於二維變換的相同屬性，如果您熟悉二維變換，你們發現3d變形的功能和2d變換的功能相當類似。css3中的3d變換主要包括以下幾種功能函式 3d位移 css3中的3d位移主要包括translatez 和translate3d 兩個功能函式 3d旋 css3中的3d旋轉主要包括rotatex...
筆記 CSS3transform屬性
transform屬性有斜拉 skew 縮放 scale 旋轉 rotate 位移 translate 斜拉skew 用法skew 10deg 或者skew 10deg,20deg 兩個引數表示傾斜角度 乙個引數時表示水平方向傾斜 兩個引數時，第乙個表示水平方向傾斜，第二個引數表示垂直方向傾斜 sk...