13306647218

公司动态

Company dynamics

前端代码 transform的使用技巧

作者:蓝梦seo专业企业网站优化时间:2020-07-13 14:26:23

transform 变形

使用CSS3转换,我们可以移动,缩放,旋转,拉伸或拉伸元素。使用transform属性将变换应用于元素。

1.变换:变换元素。

2.过渡:控制(时间等)元素的一个或多个属性的更改,类似于Flash补间动画。但是只有两个键。开始结束。

一.CSS3 2D 转换

1、2D Transform转换属性

mf_5e01830a4d5f4.jpg

2、Transform 方法

①.移动 translate

mf_5e01830a5ccb6.jpg

平移(x,y)同时在水平和垂直方向上移动(即X和Y轴同时移动)

mf_5e01830a953d6.jpg

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

mf_5e01830aa25c8.jpg

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

mf_5e01830b9d061.jpg

②.缩放 scale

mf_5e01830bb76e5.jpg

缩放比例(x,y)使水平和垂直元素同时缩放(即X和Y轴同时缩放)

mf_5e01830bd4dca.jpg

scaleX(x)元素仅水平缩放(X轴缩放)

mf_5e01830f584c5.jpg

scaleY(y)元素仅垂直缩放(Y轴缩放)

mf_5e01830fe0a0f.jpg

③.旋转 rotate

mf_5e0183104682c.jpg

元素顺时针旋转给定角度。允许负值,以便元素逆时针旋转。

mf_5e018310d42eb.jpg

④.倾斜 skew

mf_5e018310e0e8d.jpg

偏斜(x,y)使元素水平和垂直倾斜(X和Y轴同时倾斜并以某个角度值变形)

mf_5e018311080c2.jpg

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

mf_5e018312632ec.jpg

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

mf_5e01831279923.jpg

感谢您的阅读,希望本文对大家有所帮助。

点击【右上角,关注 子瑜说IT 】持续更新IT资讯以及web前端开发教学

老式农民福利礼物的8年开发:从一开始就进行网页制作,网站开发,Web前端开发,HTML + CSS + JavaScript。 jQuery,Ajax,节点,Angular框架等,直到移动applet项目的实际结束(视频+工具+电子书+系统路线图)被组织起来,共享给所有对编程感兴趣的人,并在8点向网络解释每天晚上前端技术!

如何获取:

右上角有私信,请私信发我:01 即可获取!加入前端学习

mf_5e01831343800.jpg mf_5e01831345829.jpg