CSS3-转换之skew
来源:互联网 发布:华师大公共数据库密码 编辑:程序博客网 时间:2024/05/16 11:46
skew定义2D倾斜变换,所以是在平面上进行的扭曲变换。
1、skewX(angle)
定义沿着x轴的2D倾斜旋转,即在水平方向扭曲变形,效果如下:
skewX(30deg)是在水平方向扭曲变形,但是在上图中我们可以看到实际是沿Y轴逆时针旋转30度,但是有一个很明显的特征,沿X轴扭曲时,和X轴方向平行的中心线长度始终保持不变,和Y轴平行的中心线始终沿着上下两条边运动。
2、skewY(angle)
定义沿着Y轴的2D倾斜旋转
skewY(30deg)是在水平方向扭曲变形,但是在上图中我们可以看到实际是沿X轴顺时针旋转30度,但是有一个很明显的特征,沿Y轴扭曲时,和Y轴方向平行的中心线长度始终保持不变,和X轴平行的中心线始终沿着左右两条边运动。
3、skew(x-angle,y-angle)
定义沿着x和Y轴的2D倾斜旋转,与rotate不同的时,它不仅使元素旋转,而且会使元素变形
skew(30deg,30deg)是在水平方向和垂直方向同时扭曲变形,由图我们可以看到,X和Y分别旋转30度。
如有错误,请道友指正。非常感谢!
阅读全文
0 0
- CSS3-转换之skew
- 【CSS3】变形--扭曲 skew()
- css3 skew变形
- css3 skew坐标轴
- css3 skew坐标轴笔记
- CSS3-转换之translate
- CSS3-转换之scale
- CSS3-转换之rotate
- CSS3-转换之perspective
- 数制转换问题:skew
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
- okhttp公共参数拦截器
- 经典导弹拦截dp问题(n^2算法)FZOJ 1570
- BZOJ4990&&BZOJ4993(Usaco2017 Feb)[Why Did the Cow Cross the Road II]--最长升
- 栈&栈的应用
- 快速求素数表——埃氏筛法与欧拉筛法
- CSS3-转换之skew
- Unity的特殊文件夹及脚本编译顺序
- java--归并排序
- NLTK频率分类种定义的函数
- 基于LU分解的矩阵求逆
- ADV-162-最大最小值
- shell学习笔记
- 用Unitils测试DAO时出现Write operations are not allowed in read-only mode异常
- 最大波动