1.定义和用法
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
2 transform的常见属性有哪些?
transform的属性包括: translate()/rotate() / skew() / scale() /,分别还有x、y之分,比如:rotatex() 和 rotatey() ,以此类推。
transform:translate()
含义:变动,位移;例如向右位移20像素,向上位移50像素(向左向下为负值) 实例如下
.test01{-webkit-transform:translate(20px,50px);-moz-transform:translate(20px,50px)}
transform:rotate()
含义:旋转;“deg”是表示旋转的度数 例如“180deg”表示旋转“180度” 实例如下
.test02{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg)}
transform:skew()
含义:倾斜 实例如下
.test03{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}
transform:scale()
含义:比例 1.8表示以1.8的比例放大 如果是放大整数倍如放大3倍 必须写成3.0 实例如下
.test03{-webkit-transform:scale(2.5);-moz-transform:scale(2.5)}