web前端入门到实战：transform 变形
transform 变形
通过 CSS3 变换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。使用transform属性为元素应用变换。
1、Transform：对元素进行变形。
2、Transition：对元素某个属性或多个属性的变化，进行控制（时间等），类似flash的补间动画。但只有两个关键贞。开始，结束。
一.CSS3 2D 转换
1、2D Transform转换属性
2、Transform 方法
①.移动 translate
translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
translateX(x)仅水平方向移动（X轴移动）
translateY(Y)仅垂直方向移动（Y轴移动）
②.缩放 scale
scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）
③.旋转 rotate
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iaoMhD0h-1576244971325)(https://upload-images.jianshu.io/upload_images/20062408-7cbd0be41ad6ada5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
④.倾斜 skew
skew(x,y)使元素在水平和垂直方向同时倾斜（X轴和Y轴同时按一定的角度值进行倾斜变形）
skewX(x)仅使元素在水平方向倾斜变形（X轴倾斜变形）
skewY(y)仅使元素在垂直方向倾斜变形（Y轴倾斜变形）
感谢阅读，希望本文对大家学习上有所帮助。