2021-05-08

css3变形与动画之transform

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术： DW

作者：蒙林丽

撰写时间：2021/5/7

1.  transform 属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜
2. 旋转 rotate（n）
3. 旋转函数rotate（n）通过指定的角度参数使元素相对原点进行旋转；
4. n为参数，用于设置旋转的角度，如果为正，元素相对原点中心顺时针旋转；如果为负，逆时针旋转。 

 

5.扭曲skew（）

6.元素倾斜显示，将对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜

7.三种使用情况

skew(x,y)元素同时在水平方向和垂直方向扭曲；

skewX(x)元素仅在水平方向扭曲；

skewY(y)元素仅在垂直方向扭曲；

 

 

 

8.缩放scale（）

9.让元素根据中心原点对对象进行缩放

10.三种使用情况 l

scale(x,y) 使元素水平方向和垂直方向同时缩放； l

scaleX(x) 元素仅水平方向缩放； l

scaleY(y) 元素仅垂直方向缩放；

 

 

1. 位移translate

12. 元素向指定的方向移动

13. 三种使用情况 

translate(x,y)水平方向和垂直方向同时移动；

translateX(x)仅水平方向移动；

translateY(y)仅垂直方向移动；

 

14.原点 transform-origin

15.默认的元素的中心点居于元素X轴和Y轴的50%处：16.transform-origin的作用在于可以改变原点位置，使元素不在中心位置

 

希望可以帮助到你们。

以上就是我的分享，新手上路，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！