transform 变形

transform 变形

通过 CSS3 变换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。使用transform属性为元素应用变换。

1、Transform:对元素进行变形。

2、Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画。但只有两个关键贞。开始,结束。

一.CSS3 2D 转换

1、2D Transform转换属性

《transform 变形》

2、Transform 方法

①.移动 translate

《transform 变形》

translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动)

《transform 变形》

translateX(x)仅水平方向移动(X轴移动)

《transform 变形》

translateY(Y)仅垂直方向移动(Y轴移动)

《transform 变形》

②.缩放 scale
《transform 变形》

scale(x,y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)

《transform 变形》
scaleX(x)元素仅水平方向缩放(X轴缩放)

《transform 变形》
scaleY(y)元素仅垂直方向缩放(Y轴缩放)

《transform 变形》
③.旋转 rotate
《transform 变形》

在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。

《transform 变形》

④.倾斜 skew
《transform 变形》

skew(x,y)使元素在水平和垂直方向同时倾斜(X轴和Y轴同时按一定的角度值进行倾斜变形)

《transform 变形》
skewX(x)仅使元素在水平方向倾斜变形(X轴倾斜变形)

《transform 变形》
skewY(y)仅使元素在垂直方向倾斜变形(Y轴倾斜变形)

《transform 变形》

如果大家觉得我的文章写的还不错的话,就关注 收藏一下哦!

大家可以一起探讨下前端问题呀!

rgz987

    原文作者:酷酷的莹
    原文地址: https://segmentfault.com/a/1190000019461810
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞