CSS的2D变形属性（位移、旋转、缩放、倾斜）变形属性
变形属性transform，可以实现元素的位移、旋转、缩放等。有2D和3D之分
2D坐标系：
x轴为⽔平⽅向，右侧是正数，y轴是垂直⽅向，向下为正数。
位移：translate
1. 将元素向指定的⽅向移动。rotate属性
2. ⽔平移动：translate(10px,0)右侧移动 translate(-10px,0)左侧移动
3. 垂直移动：translate(0,10px)向上移动 translate(0,-10px)向下移动
4. 对⾓移动：
1. 右下⾓：translate(10px,10px)
2. 右上⾓:translate(10px,-10px)
3. 左上⾓:translate(-10px,-10px)
4. 左下⾓：translate(-10px,10px)
缩放:scale
1. 让元素根据中⼼原点进⾏缩放，默认值是1。
2. ⼩于1的值就是缩⼩
3. ⼤于1的值就是放⼤
4. scale(2)就是将宽和⾼都放⼤2倍
5. scale(2,1)就是宽放⼤2倍，⾼不变
旋转：rotate(度数单位是deg)
1. rotate函数通过指定的⾓度对元素进⾏⼀个2D旋转，值为正数就是顺时针旋转，负数就是逆时针旋转（中⼼点）
2. rotateX：围绕x轴进⾏旋转
3. rotateY：围绕y轴进⾏旋转
4.
倾斜：skew
1. 可以让元素倾斜显⽰，以中⼼位置围绕着x轴和y轴按照⼀定⾓度倾斜。
2. ⼀个参数时表⽰⽔平⽅向的倾斜⾓度
3. 2个参数：第⼀个是⽔平，第⼆个是垂直
变形原点（transform-origin）
1. 变形原点就是让元素围绕着哪个点进⾏变形。
2. 这个属性只有在设置了transform属性的时候才会起作⽤。
3. 元素默认原点就是中⼼点（中⼼位置）
旋转缩放对位移的影响
1. ⼀般如果⽤组合写法的话位移放在最前⾯。
2. 为了保证缩和旋转不对位移产⽣影响

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。