CSS&SVG里的各种角度总结

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

未完待续……

未完待续……

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 6,831评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 5,784评论 0 2
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 5,561评论 0 7
  • Transform字面上就是变形,改变的意思。在CSS3中transform主要包括以下几种:旋转rotate、扭...
    hzrWeber阅读 22,202评论 0 19
  • byzhangxinxufromhttp://www.zhangxinxu.com 本文地址:http://www...
    凌雲木阅读 12,008评论 0 8