Web前端入口到实战:转型转型

变换变形

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

1,变换:变换元素。

2.过渡:控制(时间等。)元素的一个属性或多个属性的变化,类似于flash的补间动画。但是只有两把钥匙。开始,结束。

一. CSS3 2D转换

1,2D变换变换性质

2.转换方法

①.移动翻译

Translate(x,Y)同时水平和垂直移动(即X轴和Y轴同时移动)。

TranslateX(x)仅水平移动(x轴移动)。

TranslateY(Y)仅垂直移动(Y轴移动)。

②.缩放比例

Scale(x,y)使元素水平和垂直缩放(即x轴和y轴同时缩放)。

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

ScaleY(y)元素仅垂直缩放(y轴缩放)。

③.辐状的

顺时针旋转给定角度的元素。允许负值,因此元素逆时针旋转。

④倾斜歪斜

Skew(x,Y)使元素同时在水平和垂直方向倾斜(X轴和Y轴同时倾斜并变形一定角度)。

SkewX(x)仅导致元素在水平方向倾斜(X轴倾斜变形)。

SkewY(y)仅在垂直方向倾斜元素(Y轴倾斜)。

感谢您的阅读。希望这篇文章对大家的学习有所帮助。

点击:加入