CSS 2D 变换


目录

    显示目录


CSS 2D 变换

CSS 变换允许您移动、旋转、缩放和倾斜元素。

将鼠标悬停在下面的元素上可查看 2D 变换:

2D rotate

在本章中,您将了解以下 CSS 属性:

transform

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
transform 36.0
10.0
16.0
9.0
23.0

CSS 2D 转换方法

通过 CSS transform 属性,您可以使用以下 2D 转换方法:

translate()
rotate()
scaleX()
scaleY()
scale()
skewX()
skewY()
skew()
matrix()

提示:您将在下一章中了解 3D 变换。


translate() 方法

Translate

translate() 方法将元素从当前位置移动(根据 为 X 轴和 Y 轴给出的参数)。

以下示例将 <div> 元素向右移动 50 像素, 距离当前位置向下 100 像素:

例子

div
{
   
transform: translate(50px, 100px);
}

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: translate(50px,100px);
}
</style>
</head>
<body>

<h1>The translate() Method</h1>
<p>The translate() method moves an element from its current position:</p>

<div>
This div element is moved 50 pixels to the right, and 100 pixels down from its current position.
</div>

</body>
</html>



rotate() 方法

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

以下示例将 <div> 元素顺时针旋转 20 度:

例子

div
{
  transform: rotate(20deg);
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: rotate(20deg);
}
</style>
</head>
<body>

<h1>The rotate() Method</h1>

<p>The rotate() method rotates an element clockwise or counter-clockwise.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated clockwise 20 degrees.
</div>

</body>
</html>


使用负值将使元素逆时针旋转。

以下示例将 <div> 元素逆时针旋转 20 度:

例子

div
{
   
transform: rotate(-20deg);
}

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: rotate(-20deg);
}
</style>
</head>
<body>

<h1>The rotate() Method</h1>

<p>The rotate() method rotates an element clockwise or counter-clockwise.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated counter-clockwise with 20 degrees.
</div>

</body>
</html>




scale() 方法

Scale

scale() 方法增大或减小元素的大小(根据给定的宽度和高度参数)。

以下示例将 <div> 元素增加为其原始宽度的两倍和原始高度的三倍:

例子

div
{
   
transform: scale(2, 3);
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scale(2,3);
}
</style>
</head>
<body>

<h1>The scale() Method</h1>

<p>The scale() method increases or decreases the size of an element.</p>

<div>
This div element is two times of its original width, and three times of its original height.
</div>

</body>
</html>


以下示例将 <div> 元素减小为其原始宽度和高度的一半:

例子

div
{
   
transform: scale(0.5, 0.5);
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scale(0.5,0.5);
}
</style>
</head>
<body>

<h1>The scale() Method</h1>

<p>The scale() method increases or decreases the size of an element.</p>

<div>
This div element is decreased to be half of its original width and height.
</div>

</body>
</html>



scaleX() 方法

scaleX() 方法增加或减少 元素的宽度。

以下示例将 <div> 元素增加为其原始宽度的两倍:

例子

div
{
   
transform: scaleX(2);
}

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scaleX(2);
}
</style>
</head>
<body>

<h1>The scaleX() Method</h1>

<p>The scaleX() method increases or decreases the width of an element.</p>

<div>
This div element is two times of its original width.
</div>

</body>
</html>


以下示例将 <div> 元素减小为其原始宽度的一半:

例子

div
{
   
transform: scaleX(0.5);
}

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scaleX(0.5);
}
</style>
</head>
<body>

<h1>The scaleX() Method</h1>

<p>The scaleX() method increases or decreases the width of an element.</p>

<div>
This div element is half of its original width.
</div>

</body>
</html>



scaleY() 方法

scaleY() 方法增加或减少 元素的高度。

以下示例将 <div> 元素增加到原始元素的三倍 高度:

例子

div
{
   
transform: scaleY(3);
}

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scaleY(3);
}
</style>
</head>
<body>

<h1>The scaleY() Method</h1>

<p>The scaleY() method increases or decreases the height of an element.</p>

<div>
This div element is three times of its original height.
</div>

</body>
</html>


以下示例将 <div> 元素减少为原始元素的一半 高度:

例子

div
{
   
transform: scaleY(0.5);
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scaleY(0.5);
}
</style>
</head>
<body>

<h1>The scaleY() Method</h1>

<p>The scaleY() method increases or decreases the height of an element.</p>

<div>
This div element is half of its original height.
</div>

</body>
</html>



skewX() 方法

skewX() 方法将元素沿 X 轴倾斜给定角度。

以下示例将 <div> 元素沿 X 轴:

例子

div
{
   
transform: skewX(20deg);
}

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: skewX(20deg);
}
</style>
</head>
<body>

<h1>The skewX() Method</h1>

<p>The skewX() method skews an element along the X-axis by the given angle.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is skewed 20 degrees along the X-axis.
</div>

</body>
</html>



skewY() 方法

skewY() 方法将元素沿 Y 轴倾斜给定角度。

以下示例将 <div> 元素沿 Y 轴倾斜 20 度:

例子

div
{
   
transform: skewY(20deg);
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: skewY(20deg);
}
</style>
</head>
<body>

<h1>The skewY() Method</h1>

<p>The skewY() method skews an element along the Y-axis by the given angle.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is skewed 20 degrees along the Y-axis.
</div>

</body>
</html>



skew() 方法

skew() 方法将元素沿 X 轴和 Y 轴倾斜给定的角度。

以下示例将 <div> 元素沿 X 轴倾斜 20 度,沿 Y 轴倾斜 10 度:

例子

div
{
   
transform: skew(20deg, 10deg);
}

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: skew(20deg,10deg);
}
</style>
</head>
<body>

<h1>The skew() Method</h1>
<p>The skew() method skews an element into a given angle.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is skewed 20 degrees along the X-axis, and 10 degrees along the Y-axis.
</div>

</body>
</html>


如果未指定第二个参数,则其值为零。因此,以下示例将 <div> 元素沿 X 轴倾斜 20 度:

例子

div
{
   
transform: skew(20deg);
}

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: skew(20deg);
}
</style>
</head>
<body>

<h1>The skew() Method</h1>

<p>The skew() method skews an element into a given angle.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is skewed 20 degrees along the X-axis.
</div>

</body>
</html>



matrix() 方法

matrix() 方法将所有 2D 变换方法合并为一个。

Matrix() 方法有六个参数,包含数学函数, 它允许您旋转、缩放、移动(平移)和倾斜元素。

参数如下:matrix(scaleX()、skewY()、skewX()、scaleY()、translateX()、translateY())

例子

div
{
    
transform: matrix(1, -0.3, 0, 1, 0, 0);
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv1 {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

div#myDiv2 {
  transform: matrix(1, 0, 0.5, 1, 150, 0);
}
</style>
</head>
<body>

<h1>The matrix() Method</h1>

<p>The matrix() method combines all the 2D transform methods into one.</p>

<div>
This 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 变换属性

下表列出了所有 2D 变换属性:

transform

对元素应用 2D 或 3D 变换

transform-origin

允许您更改变换元素的位置

CSS 2D 变换方法

matrix(n,n,n,n,n,n)

使用六个值的矩阵定义 2D 变换

translate(x,y)

定义 2D 平移,沿 X 轴和 Y 轴移动元素

translateX(n)

定义 2D 平移,沿 X 轴移动元素

translateY(n)

定义 2D 平移,沿 Y 轴移动元素

scale(x,y)

定义 2D 缩放变换,更改元素的宽度和高度

scaleX(n)

定义 2D 缩放变换,更改元素的宽度

scaleY(n)

定义 2D 缩放变换,更改元素的高度

rotate(angle)

定义一个2D旋转,角度在参数中指定

skew(x-angle,y-angle)

定义沿 X 轴和 Y 轴的 2D 倾斜变换

skewX(angle)

定义沿 X 轴的 2D 倾斜变换

skewY(angle)

定义沿 Y 轴的 2D 倾斜变换