一、transform属性取值:
作用:该属性允许我们对元素进行移动、旋转、缩放
1.translate(100px, 0px) 移动
第一个参数:水平方向
第二个参数:垂直方向
2.rotate(45deg) 旋转
deg是单位, 代表多少度
3.scale(1.5,1.5) 缩放
第一个参数:水平方向
第二个参数:垂直方向
注意点:
1.如果取值是1, 代表不变
2.如果取值大于1, 代表需要放大
- 如果取值小于1, 代表需要缩小
4.如果水平和垂直缩放都一样, 那么可以简写为一个参数
5.如果需要进行多个转换, 那么用空格隔开
6.2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的
二、transform-origin属性取值
作用:设置形变中心点
1.transform-origin:200px 0px;
第一个参数:水平方向
第二个参数:垂直方向
注意点
取值有三种形式: 具体像素 、百分比 、特殊关键字
三、perspective
透视,显示 近大远小的效果
一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面