Css3动画:旋转与扭曲的区分
开发工具与关键技术:DW Css3
作者:陈子乔
撰写时间:2019年1月19日
如何区分旋转与扭曲呢?因为两者呈现出来的效果大为相同,如果不细心一点还会将两者混乱,主要从以下两方面来区分
1 首先看看效果图
rotate()旋转
skew()扭曲
从上面两张图可以对比出,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)使元素在水平方向和垂直方向同时发生扭曲变形。
最后再认真对比一下,大概就可以区分旋转跟扭曲了
????