CSS 变换

2025 年 3 月 26 日 | 阅读 5 分钟

CSS3 支持 transform 属性。此 transform 属性允许您对元素进行平移、旋转、缩放和倾斜。

变换是一种用于改变形状、大小和位置的效果。

CSS3 支持的变换有两种类型：2D 和 3D 变换。

CSS 2D Transforms

CSS 2D 变换用于重新改变元素的结构，例如平移、旋转、缩放和倾斜等。

以下是 2D 变换方法列表

translate(x,y): 用于沿 X 轴和 Y 轴变换元素。
translateX(n): 用于沿 X 轴变换元素。
translateY(n): 用于沿 Y 轴变换元素。
rotate(): 用于根据角度旋转元素。
scale(x,y): 用于改变元素的宽度和高度。
scaleX(n): 用于改变元素的宽度。
scaleY(n): 用于改变元素的高度。
skewX(): 指定沿 X 轴的倾斜变换。
skewY(): 指定沿 Y 轴的倾斜变换。
matrix(): 指定矩阵变换。

支持的浏览器

属性	Chrome	IE	Firefox	Opera	Safari
transform	36.04.0 -webkit-	10.09.0 -ms-	16.03.5 -moz-	23.0 15.0 -webkit- 12.1 10.5 -o-	9.03.2 -webkit-
transform-origin (双值语法)	36.0 4.0 -webkit-	10.0 9.0 -ms-	16.03.5 -moz-	9.03.2 -webkit-	23.0 15.0 -webkit- 12.110.5 -o-

translate() 方法

CSS translate() 方法用于根据给定的参数（X 轴和 Y 轴）将元素从其当前位置移动。

让我们举个例子来平移一个

元素，使其在当前位置向右移动 50 像素，向下移动 100 像素。

请看这个例子

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>
div {
    width: 300px;
    height: 100px;
    background-color: lightgreen;
    border: 1px solid black;
    -ms-transform: translate(100px,80px); /* IE 9 */
    -webkit-transform: translate(100px,80px); /* Safari */
    transform: translate(100px,80px); /* Standard syntax */
}
</style>
</head>
<body>
<div>
This div element is translated 50 pixels right, and 100 pixels down from its current position by using translate () method.
</div>
</body>
</html>

rotate() 方法

CSS rotate() 方法用于根据给定的角度顺时针或逆时针旋转元素。

让我们举个例子来旋转一个

元素 300 度。

请看这个例子

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 300px;
    height: 100px;
    background-color: lightpink;
    border: 1px solid black;
}
div#myDiv {
    -ms-transform: rotate(30deg); /* IE 9 */
    -webkit-transform: rotate(30deg); /* Safari */
    transform: rotate(30deg); /* Standard syntax */
}
</style>
</head>
<body>
<div>
This a normal div element.
</div>
<div id="myDiv">
This is the 30 degree clockwise rotated div element by using rotate() method.  
</div>
</body>
</html>

scale() 方法

CSS scale() 方法用于根据给定的宽度和高度来增大或减小元素的大小。

让我们举个例子，通过将其宽度和高度增加两倍来增大元素的大小。

查看此示例

strong>查看此示例

<!DOCTYPE html>
<html>
<head>
<style>
div {
    margin: 150px;
    width: 200px;
    height: 100px;
    background-color: lightpink;
    border: 1px solid black;
    border: 1px solid black;
    -ms-transform: scale(2.5,2); /* IE 9 */
    -webkit-transform: scale(2.5,2); /* Safari */
    transform: scale(2.5,2); /* Standard syntax */
}
</style>
</head>
<body>
<div>
This div element is scaled 2.5 times of its original width, and 2 times of its original height.
</div>
</body>
</html>

skewX() 方法

CSS skewX() 方法用于根据给定的角度沿 X 轴倾斜元素。让我们举个例子，将一个

元素沿 X 轴倾斜 30 度。

请看这个例子

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 300px;
    height: 100px;
    background-color: lightpink;
    border: 1px solid black;
}
div#myDiv {
    -ms-transform: skewX(30deg); /* IE 9 */
    -webkit-transform: skewX(30deg); /* Safari */
    transform: skewX(30deg); /* Standard syntax */
}
</style>
</head>
<body>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is skewed 30 degrees along the X-axis.
</div>
</body>
</html>

skewY() 方法

CSS skewY() 方法用于根据给定的角度沿 Y 轴倾斜元素。让我们举个例子，将一个

元素沿 Y 轴倾斜 30 度。

请看这个例子

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 300px;
    height: 100px;
    background-color: lightpink;
    border: 1px solid black;
}
div#myDiv {
    -ms-transform: skewY(30deg); /* IE 9 */
    -webkit-transform: skewY(30deg); /* Safari */
    transform: skewY(30deg); /* Standard syntax */
}
</style>
</head>
<body>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is skewed 30 degrees along the Y-axis.
</div>
</body>
</html>

skew() 方法

CSS skew() 方法用于根据给定的角度沿 X 轴和 Y 轴倾斜元素。

让我们使用一个 <div> 元素，并将其沿 X 轴倾斜 30 度，沿 Y 轴倾斜 20 度。

请看这个例子

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 300px;
    height: 100px;
    background-color: lightpink;
    border: 1px solid black;
}
div#myDiv {
    -ms-transform: skew(30deg,20deg); /* IE 9 */
    -webkit-transform: skew(30deg,20deg); /* Safari */
    transform: skew(30deg,20deg); /* Standard syntax */
}
</style>
</head>
<body>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is skewed 30 degrees along the X-axis, and 20 degrees along the Y-axis.
</div>
</body>
</html>

matrix() 方法

CSS matrix() 方法将所有六个 2D 变换方法组合在一起。它允许您旋转、缩放、平移和倾斜元素。

语法

matrix 方法的参数：matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

请看这个例子

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 300px;
    height: 100px;
    background-color: lightpink;
    border: 1px solid black;
}
div#myDiv1 {
    -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
    -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
    transform: matrix(1, -0.3, 0, 1, 0, 0); /* Standard syntax */
}
div#myDiv2 {
    -ms-transform: matrix(1, 0, 0.5, 1, 150, 0); /* IE 9 */
    -webkit-transform: matrix(1, 0, 0.5, 1, 150, 0); /* Safari */
    transform: matrix(1, 0, 0.5, 1, 150, 0); /* Standard syntax */
}
</style>
</head>
<body>
<p>The matrix() method combines all the 2D transform methods into one.</p>
<div>
This  is a normal div element.
</div>
<div id="myDiv1">
Using the matrix() method.
</div>
<div id="myDiv2">
Another use of the matrix() method.
</div>
</body>
</html>

下一个主题CSS 3D 变换

CSS 变换

CSS 2D Transforms

支持的浏览器

translate() 方法

rotate() 方法

scale() 方法

skewX() 方法

skewY() 方法

skew() 方法

matrix() 方法

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS 变换

CSS 2D Transforms

支持的浏览器

translate() 方法

rotate() 方法

scale() 方法

skewX() 方法

skewY() 方法

skew() 方法

matrix() 方法

相关帖子

CSS flex property

CSS Tooltip Animation

flex-basis property

flex-shrink property

CSS Combinators

CSS Aural Media

CSS Pseudo-elements

CSS translate

flex-grow property

CSS @Media Query

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器