①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°,渐变线逆时针旋转为正值。
未完待续……
未完待续……