CSS3复习3-形状变换-过渡动画-animation

一、transform 可以实现元素的形状、角度、位置等的变化。

1、transform: rotate(45deg);

旋转45度，deg代表度数

rotateX（）//X轴旋转
rotateY（）//Y轴旋转
rotatez()
rotate3d(x, y, z, angle) x, y, z

2、scale(); 以x/y为轴进行缩放

            transform: scale(2,1);
            x轴放大两倍，y轴一倍

scale(x, y) 接受两个值，如果第二参数未提供，则第二个参数使用第一个参数的值
scalex()
scaley() 值是数字表示倍数，不加任何单位
scalez()
scale3d(sx,sy,sz)

3、skew(); 对元素进行倾斜扭曲

transform: skewY(40deg);扭曲这一特性很难把控~

skew(x, y);接受两个值，第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
skewx(),
skewy()

4、translate(); 移动距离,相对于自身位置。（重点）

有一个要点，我们可以通过此方法对元素进行居中

translate(x, [y])
translatex()
translatey