CSS3-转换之skew

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wjnf012/article/details/78658866

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度。

如有错误,请道友指正。非常感谢!

展开阅读全文

没有更多推荐了,返回首页