css3中的提供的元素变化属性

通过 CSS3 提供的2d元素转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

css3中为我们 提供了：

translate()

rotate()

scale()

skew()

matrix() 些方法来对对象进行位移，旋转，缩放，或者拉伸。

注意：Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。

1. translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数值移动。

{

transform: translate(50px,100px);-ms-transform: translate(50px,100px); /* IE 9 */-webkit-transform: translate(50px,100px); /* Safari and Chrome */-o-transform: translate(50px,100px); /* Opera */-moz-transform: translate(50px,100px); /* Firefox */

}

 

2. ranslate() 方法，规定按照顺时针方向旋转设定的角度。

{transform: rotate(30deg);-ms-transform: rotate(30deg); /* IE 9 */-webkit-transform: rotate(30deg); /* Safari and Chrome */-o-transform: rotate(30deg); /* Opera */-moz-transform: rotate(30deg); /* Firefox */}

设置角度为30度的偏转。

 

3. scale()方法 元素的尺寸根据给定的参数放大或者缩小，宽度为x轴，高度为y轴。

{transform: scale(2,4);-ms-transform: scale(2,4); /* IE 9 */-webkit-transform: scale(2,4); /* Safari 和 Chrome */-o-transform: scale(2,4); /* Opera */-moz-transform: scale(2,4); /* Firefox */}

4. skew()方法 元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数。

div{transform: skew(30deg,20deg);-ms-transform: skew(30deg,20deg); /* IE 9 */-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */-o-transform: skew(30deg,20deg); /* Opera */-moz-transform: skew(30deg,20deg); /* Firefox */}

5. matrix() 方法把所有 2D 转换方法组合在一起。

matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

div{transform:matrix(0.866,0.5,-0.5,0.866,0,0);-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */}

以上为css3提供的2d属性，希望对大家的学习有帮助。