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