2D转换
- transform
- 2D移动:translate()。使用translate()函数,可以把元素从原来的位置移动,移动参照元素左上角原点
- 语法:translate(x px) | translate(x, y px)
- 只设置一个参数表示向x方向移动,设置两个参数表示向x和y方向移动
- 也可以使用translateX(x)或者translateY(y)
- 执行完毕之后会回到原始状态
- 有一个很重要的应用,就是如果想要在一个div里面设置另一个div水平垂直都居中在之前是没有办法实时实现的,而现在可以通过子绝父相,然后设置上左都是50%,最后用transform: translate(-50%, -50%)来实时实现
- 2D缩放:scale()。使用scale()函数,让元素根据中心原点对对象进行缩放,默认值为1
- 语法:scale(x & y) | scale(x, y)
- 只设置一个值,是让整体缩放,设置两个值则是各自设置
- 不会影响其他元素的位置
- 也可以设置scaleX()或者scaleY()
- 2D旋转:rotate(90deg)。使用rotate()函数,通过传入的角度值使元素绕z轴旋转
- 2D斜切:skew(90deg)。使用skew()函数,能够让元素倾斜显示。它可以将一个对象以其中心位置围绕x轴和y轴按照一定角度倾斜
- 语法:skew(x) | skew(x, y)
- x用来指定元素水平方向倾斜的角度,y同理为垂直方向
- 也可以使用skewX()或者skewY()
- 如果角度值为正,则向当前轴的负方向斜切,如果角度为负,则向当前轴的正方向斜切
- 语法:skew(x) | skew(x, y)
- 旋转轴心:transform-origin
- 属性值
- 具体值,transfrom-origin: x y
- 关键字:left top center right bottom
- 属性值
- 多个转换
- 如果想要对一个元素进行多种转换效果,只需要在添加完一种转换效果之后使用空格隔开继续添加
- 注意:旋转也会将当前的坐标系一起旋转,所以先旋转再移动和先移动再旋转是不同的