transform的含义是:改变,使…变形;转换
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
浏览器的支持:
Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。
Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。
Opera 只支持 2D 转换。
2D转换方法属性:
1)translate()方法,元素从当前位置移动,根据给定的left(x坐标)和top(y坐标)位置参数;
eg:把元素从左侧移动50px,从顶端移动100px;
div{
transform:translate(50px,100px);
}
2)rotate()方法:元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转;
eg:把元素顺时针旋转30度;
div{
transfrom:rotate(30deg);
}
3)scale()方法:元素的尺寸会增加或减少,根据给定的宽度(x轴)和高度(Y轴)参数;
eg:把div的宽度转换为原始尺寸的2倍,把高度转换为原始高度的4倍;
div{
transform:scale(2,4);
}
4)skew()方法:元素翻转给定的角度,根据给定的水平线(x轴)和垂直线(Y轴)参数;
eg:围绕x轴把元素翻转30度,围绕Y轴翻转20度;
div{
transform:skew(30deg,20deg);
}
5)matrix()方法:把所有2D转换方法组合在一起,需要6个参数,包含数学函数,允许:旋转、缩放、移动以及倾斜元素。使用6个值得矩阵;
3D转换方法属性:
1)rotateX()方法:元素围绕其X轴以给定的度数进行旋转;
2)rotateY()方法:元素围绕其Y轴以给定的度数进行旋转;