①rotate(旋轉):
CSS語法示例:transform:rotate(angle);
SVG語法示例:transform="rotate(angle)"
rotate角度計算取水平向右為0°陵霉,順時針方向為正值踊挠。
(話說為社么SVG的transform不能寫到style里?沒有看到任何相關說明模蜡。)
②skew(傾斜):
CSS語法示例:transform:skewX(angle) skewY(angle) skew(anglex, angley);
SVG語法示例:transform="skewX(angle) skewY(angle)"
skew角度根據x軸與y軸不同忍疾,分兩種計算方法:
skewX角度取豎直向上方向為0°谨朝,y坐標軸沿逆時針方向向x軸傾斜為正值字币;
skewY角度取水平向右方向為0°洗出,x坐標軸沿順時針方向向y軸傾斜為正值。
轉大神的Demo:http://www.zhangxinxu.com/study/201206/css3-transform-matrix-skew.html
(話說為社么CSS的角度值要加deg單位阱洪,SVG只需要數字呢冗荸?)
③漸變:
語法示例:background-image:linear-gradient(angle,color1...);
漸變角度取豎直向上為0°蚌本,漸變線逆時針旋轉為正值。
未完待續(xù)……
未完待續(xù)……