CSS transform 属性

定义和用法

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

为了更好地理解 transform 属性，请查看这个演示。

另请参阅：

CSS3 教程：CSS3 2D 转换

CSS3 教程：CSS3 3D 转换

HTML DOM 参考手册：transform 属性

实例

旋转 div 元素：

div
{
transform:rotate(7deg);
}

亲自试一试

页面底部有更多实例。

CSS 语法

transform: none|transform-functions;

属性值

值 描述 Test
none 定义不进行转换。 Test
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。 Test
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 值的 4x4 矩阵。
translate(x,y) Tukuyin ang 2D transformation. Test
translate3d(x,y,z) Tukuyin ang 3D transformation.
translateX(x) Tukuyin ang transformation, na ginagamit lamang ang halaga ng X axis. Test
translateY(y) Tukuyin ang transformation, na ginagamit lamang ang halaga ng Y axis. Test
translateZ(z) Tukuyin ang 3D transformation, na ginagamit lamang ang halaga ng Z axis.
scale(x,y) Tukuyin ang 2D scaling transformation. Test
scale3d(x,y,z) Tukuyin ang 3D scaling transformation.
scaleX(x) Tukuyin ang scaling transformation sa pamamagitan ng pagtatakda ng halaga ng X axis. Test
scaleY(y) Tukuyin ang scaling transformation sa pamamagitan ng pagtatakda ng halaga ng Y axis. Test
scaleZ(z) Tukuyin ang 3D scaling transformation sa pamamagitan ng pagtatakda ng halaga ng Z axis.
rotate(angle) Tukuyin ang 2D rotation, na tinutukoy ng ang angle sa mga parameter. Test
rotate3d(x,y,z,angle) Tukuyin ang 3D rotation.
rotateX(angle) Tukuyin ang 3D rotation na kasunod ng X axis. Test
rotateY(angle) Tukuyin ang 3D rotation na kasunod ng Y axis. Test
rotateZ(angle) Tukuyin ang 3D rotation na kasunod ng Z axis. Test
skew(x-angle,y-angle) Tukuyin ang 2D tilting transformation na kasunod ng X at Y axis. Test
skewX(angle) Tukuyin ang 2D tilting transformation na kasunod ng X axis. Test
skewY(angle) Tukuyin ang 2D tilting transformation na kasunod ng Y axis. Test
perspective(n) Tukuyin ang perspektibo ng paningin para sa 3D transformation element. Test

Technical Details

Default Value: none
Inheritance: no
Version: CSS3
JavaScript Grammar: object.style.transform="rotate(7deg)"

Higit pang halimbawa

Ang larawan na itinapon sa ibabaw ng mesa
Ito ay nagpapakita kung paano gumawa ng larawan ng 'Polaroid' at i-rotate ang larawan.

Suporta ng Browser

Ang numero sa talahanayan ay naglalarawan ng kauna-unahang bersyon ng browser na nagtutulungan sa katangian.

Ang numero na may -webkit-、-moz- o -ms- ay naglalarawan ng unang bersyon na ginagamit ang pangalawang baryante.

Atribute Chrome IE / Edge Firefox Safari Opera
transform (2D) 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
10.5 -o-
transform (3D) 36.0
12.0 -webkit-		 12.0 10.0 9.0
4.0 -webkit-		 23.0
15.0 -webkit-