Css3动画:旋转与扭曲的区分

开发工具与关键技术:DW Css3

作者:陈子乔

撰写时间:2019年1月19日

如何区分旋转与扭曲呢?因为两者呈现出来的效果大为相同,如果不细心一点还会将两者混乱,主要从以下两方面来区分

1 首先看看效果图

rotate()旋转
Css3动画:旋转与扭曲的区分

skew()扭曲
Css3动画:旋转与扭曲的区分

   从上面两张图可以对比出,rotate只是旋转,而不会改变元素的形状;

skew不会旋转,而只会改变元素的形状。

2看属性

(1)rotate用法 transform:rotate(值可以为正负值)

1.1 如果这个值为正值,元素相对原点中心顺时针旋转;

1.2 如果这个值为负值,元素相对原点中心逆时针旋转。

(2)skew 用法 transform:skew(正不对称度表示不对称部分的分布更趋向正值。负不对称度表示不对称部分的分布更趋向负值)

2.1 Skew(x)只能使元素在水平方向扭曲变形即X轴发生扭曲变形。

2.2 Skew(Y)只能使元素在垂直方向扭曲变形即Y轴发生扭曲变形。

2.3 Skew(x y)使元素在水平方向和垂直方向同时发生扭曲变形。

最后再认真对比一下,大概就可以区分旋转跟扭曲了
????

相关文章: