1、通过CSS3转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸
转换是使元素改变形状、尺寸和位置的一种效果
可以使用2D, 3D来转换元素
2, 2D转换方法:
###translate():使元素移动
有两个参数,x和y,x表示水平方向的移动,y表示垂直方向的移动
例如: transfrom:translate(100px,100px):
rotate():旋转
例子:transfrom:rotate(180deg):
deg 是一个度数单位必须写的
scale():缩放
例子:transfeom:scale(1,2);
有两个参数,第一个是宽度倍数的缩放 1表示不变 ,第二个是高度倍数的缩放 2 表示2倍
skew():倾斜
例子:transfrom:skew(50deg,50deg);
有两个参数,第一个是x轴方向的倾斜,第二个是y轴方向的倾斜
transform-origin:其默认值为 transform 元素的中心点,即 50% 50% ;
可以改变这个属性的值,从而改变变换的中心点。
matrix()
接收 6 个参数:a、b、c、d、e、f(不常用)
效果:效果演示
3, 3D转换方法:
rotateX()
rotateY()