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

在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

④.倾斜 skew

skew(x,y)使元素在水平和垂直方向同时倾斜（X轴和Y轴同时按肯定的角度值进行倾斜变形）

skewX(x)仅使元素在水平方向倾斜变形（X轴倾斜变形）

skewY(y)仅使元素在垂直方向倾斜变形（Y轴倾斜变形）

感谢阅读，希望本文对大家学习上有所帮助。

从事先端6年，一个人学习会有迷茫，动力不足。这里推荐一下我的前台学习交流qun：731771211 ，里面都是学习前台的，假如你想制作酷炫的网页，想学习编程。自己整理了一份最新最全面前台学习资料，从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到手机端HTML5的项目实战的学习资料都有整理，送给每一位前台小伙伴，有想学习web前台的，或者是转行，或者是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入学习。

点击：加入