css 2d转换_使用CSS进行2D转换

蔚落 2023-03-05 12:35 43阅读 0赞

css 2d转换

## CSS | 2D转换 **(**CSS | 2D Transformation**)** ##

**2D transformation in CSS** allows you to **move**, **rotate**, **scale**, and **skew** elements shape, size and position along the x-axis and y-axis.

**CSS中的2D转换**使您可以沿x轴和y轴**移动** ， **旋转** ， **缩放**和**倾斜**元素的形状，大小和位置。

In CSS, **2D transform property** allows you to use the following 2D transformation methods,

在CSS中， **2D变换属性**允许您使用以下2D变换方法，

1.  rotate()
    
    旋转()
2.  translate()
    
    翻译()
3.  scale()
    
    规模()
4.  Skew()
    
    偏斜()
5.  matrix()
    
    矩阵()

Let's look at each method one by one.

让我们逐一查看每种方法。

### 1)旋转() **(**1) rotate()**)** ###

**rotate() property** defines a transformation that moves the element around a fixed point on the x-axis in either clockwise or anti-clockwise direction.

**rotation()属性**定义了一种转换，该转换可沿x轴上的固定点沿顺时针或逆时针方向移动元素。

**Syntax:**

**句法：**

Element{
         
    	transform:rotate(30deg); 
    }

**Example:**

**例：**

<!DOCTYPE html>
    <html>
    
    <head>
        <style>
            div {
        
                width: 300px;
                height: 100px;
                background-color: pink;
                border: 1px solid black;
            }
            
            div#myDiv {
        
                transform: rotate(45deg);
            }
        </style>
    </head>
    
    <body>
        <div>
            this is div
        </div>
        <div id="myDiv">
            this div element is rotated clockwise 45 degrees.
        </div>
    </body>
    
    </html>

**Output**

**输出量**

![CSS | 2D Transformation | Example 1][CSS _ 2D Transformation _ Example 1]

In the above example, the <div> element is rotated clockwise 45 degrees.

在上面的示例中， <div>元素顺时针旋转45度。

### 2)translate() **(**2) translate()**)** ###

**translate() property** moves the position of the element from the current position on the X-axis and Y-axis.

**translate()属性**将元素的位置从X轴和Y轴上的当前位置移开。

*  translateX() \- Moves the position of the element on the X-axis.
    
    translateX() -在X轴上移动元素的位置。
 *  translateY() \- Moves the position of the element on the Y-axis.
    
    translateY() -在Y轴上移动元素的位置。

**Syntax:**

**句法：**

Element{
         
    	transform:translate(30px,10px); 
    }

**Example:**

**例：**

<!DOCTYPE html>
    
    <html>
    <head>
        <style>
            div {
        
                width: 300px;
                height: 100px;
                background-color: pink;
                border: 1px solid black;
                transform: translate(60px, 80px);
            }
        </style>
    </head>
    
    <body>
        <h1>2D transformation</h1>
        <div>
            This is a div element.
        </div>
    </body>
    
    </html>

**Output**

**输出量**

![CSS | 2D Transformation | Example 2][CSS _ 2D Transformation _ Example 2]

In the above example, <div> element 60 pixels to the right, and 80 pixels down from its current position.

在上面的示例中， <div>元素向右60像素，从当前位置向下80像素。

### 3)scale() **(**3) scale()**)** ###

**scale() property** modifies the size of the element on the X and Y-axis.

**scale()属性**修改X和Y轴上元素的大小。

scaleX() \- Modifies the size of the element on the X-axis. scaleY() \- Modifies the size of the element on the Y-axis.

scaleX() -修改X轴上元素的大小。 scaleY() -修改Y轴上元素的大小。

**Syntax:**

**句法：**

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

**Example:**

**例：**

<!DOCTYPE html>
    
    <html>
    
    <head>
        <style>
            div {
        
                margin: 150px;
                width: 200px;
                height: 100px;
                background-color: pink;
                border: 1px solid black;
                transform: scale(2, 3);
            }
        </style>
    </head>
    
    <body>
        <h1>2D transformation</h1>
        <div>
            This is div element.
        </div>
    </body>
    
    </html>

**Output**

**输出量**

![CSS | 2D Transformation | Example 3][CSS _ 2D Transformation _ Example 3]

In the above example, element <div> increases to 3 times of its original height, and 2 times of its original width.

在上面的示例中，元素<div>增加到其原始高度的3倍和其原始宽度的2倍。

### 4)偏斜() **(**4) skew()**)** ###

Shear mapping or skewing each point of an element by a certain angle along the X-axis or Y-axis.

沿着X轴或Y轴以一定角度剪切或映射元素的每个点。

*  **skewX()** \- Horizontally skewing each point of an element by a certain angle in the horizontal direction.
    
    **skewX()** \-将元素的每个点沿水平方向水平倾斜一定角度。
 *  **skewY()** \- Vertically skewing each point of an element by a certain angle in the vertical direction.
    
    **skewY()** \-在垂直方向**上将**元素的每个点垂直倾斜一定角度。

**Syntax:**

**句法：**

Element{
         
    	transform:skew(3,4); 
    }

**Example:**

**例：**

<!DOCTYPE html>
    <html>
    
    <head>
        <style>
            div {
        
                margin: 150px;
                width: 200px;
                height: 100px;
                background-color: pink;
                border: 1px solid black;
                transform: scale(1, 2);
            }
        </style>
    </head>
    
    <body>
        <h1>2D transformation</h1>
        <div>
            This is div element.
        </div>
    </body>
    
    </html>

**Output**

**输出量**

![CSS | 2D Transformation | Example 4][CSS _ 2D Transformation _ Example 4]

In the above example, skews the <div> element 1px along the X-axis, and 2px along the Y-axis.

在上面的示例中， <div>元素在X轴上倾斜1px，在Y轴上倾斜2px。

### 5)matrix() **(**5) matrix()**)** ###

**matrix() property** defines a 2D transformation in the form of a transformation matrix. The method **matrix()** takes six parameters which allow you to rotate, scale, translate, and skew elements in respective order.

**matrix()属性**以转换矩阵的形式定义2D转换。 方法**matrix()**具有六个参数，这些参数使您可以按相应顺序旋转，缩放，平移和倾斜元素。

**Syntax:**

**句法：**

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

**Example:**

**例：**

<!DOCTYPE html>
    <html>
    
    <head>
        <style>
            div {
        
                width: 300px;
                height: 100px;
                background-color: pink;
                border: 1px solid black;
                transform: matrix(1, -0.3, 0, 1, 0, 0);
            }
        </style>
    </head>
    
    <body>
        <h1>2D transformation</h1>
        <div>
            This a div element..
        </div>
    </body>
    
    </html>

**Output**

**输出量**

![CSS | 2D Transformation | Example 5][CSS _ 2D Transformation _ Example 5]

In the above example, matrix() property is used.

在上面的示例中，使用了matrix()属性。

> 翻译自: [https://www.includehelp.com/code-snippets/2d-transformation-using-css.aspx][https_www.includehelp.com_code-snippets_2d-transformation-using-css.aspx]

css 2d转换

[CSS _ 2D Transformation _ Example 1]: https://www.includehelp.com/code-snippets/Images/2d-transformation-css-example-1.jpg
[CSS _ 2D Transformation _ Example 2]: /images/20230208/faa6ff0b52944b8a9dbd40055dd6e0bc.png
[CSS _ 2D Transformation _ Example 3]: /images/20230208/1b97a69f2c114801b57fa62768a073fd.png
[CSS _ 2D Transformation _ Example 4]: /images/20230208/e3b60c4a8eda496d8f634f495c6c5124.png
[CSS _ 2D Transformation _ Example 5]: /images/20230208/ff72617ba90f41d4b539d7c8f21f9bb1.png
[https_www.includehelp.com_code-snippets_2d-transformation-using-css.aspx]: https://www.includehelp.com/code-snippets/2d-transformation-using-css.aspx