閱讀(9.2k) 書簽贊(6) 我要糾錯

CSS3 2D變換

2023-01-06 17:01 更新

CSS變換改變元素的位置和形狀。

CSS變換可以將仿射線性變換應用于HTML元素。

這些變換包括在平面和3D空間中的旋轉，傾斜，縮放和平移。

CSS轉換屬性

我們可以使用以下兩個屬性來定義CSS變換。

transform - 指定要應用于元素的變換。
transform-origin - 指定原點的位置。默認情況下，它在元素的中心。

translate()方法

我們可以使用translate()方法從當前位置移動元素。

在下面的代碼中 translate(50px，100px)移動元素從左邊50像素，從頂部100像素。


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

div#div2 {
    -ms-transform: translate(50px,100px); /* IE 9 */
    -webkit-transform: translate(50px,100px); /* Chrome, Safari, Opera */
    transform: translate(50px,100px); /* Standard syntax */
}
</style>
</head>
<body>
    <div>Hello.</div>
    <div id="div2">Hello. </div>

</body>
</html>

上面的代碼呈現(xiàn)如下：

rotate()方法

我們可以使用rotate()方法以給定的度數順時針旋轉元素。

我們也可以使用負值逆時針旋轉元素。

在下面的代碼中 rotate(30deg)將元素順時針旋轉30度。


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

div#div2 {
    -ms-transform: rotate(30deg); /* IE 9 */
    -webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
    transform: rotate(30deg); /* Standard syntax */
}
</style>
</head>
<body>

    <div>Hello.</div>
    <div id="div2">Hello. </div>

</body>
</html>

上面的代碼呈現(xiàn)如下：

rotate()方法

scale()方法

我們可以使用scale()方法來增加或減少元素大小。

我們可以改變寬度(X軸)和高度(Y軸)。

在下面的代碼中 scale(2,4)將寬度轉換為原始大小的兩倍，高度為其原始尺寸的4倍。


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

div#div2 {
    margin: 100px;
    -ms-transform: scale(2,4); /* IE 9 */
    -webkit-transform: scale(2,4); /* Chrome, Safari, Opera */
    transform: scale(2,4); /* Standard syntax */
}
</style>
</head>
<body>

<div>Hello.</div>

<div id="div2">Hello.</div>

</body>
</html>

上面的代碼呈現(xiàn)如下：

scale()方法

skew() 方法

我們可以使用skew()方法在給定的角度轉動元素。

我們可以沿水平(X軸)和垂直(Y軸)線旋轉元素。


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

div#div2 {
    -ms-transform: skew(30deg,20deg); /* IE 9 */
    -webkit-transform: skew(30deg,20deg); /* Chrome, Safari, Opera */
    transform: skew(30deg,20deg); /* Standard syntax */
}
</style>
</head>
<body>

<div>Hello.</div>

<div id="div2">Hello.</div>

</body>
</html>

上面的代碼呈現(xiàn)如下：

skew()方法

matrix()方法

matrix()方法將所有的2D變換方法組合成一個。

矩陣方法采用六個參數，包含數學函數，它允許您：旋轉，縮放，移動（平移）和偏斜元素。


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

div#div2 {
    -ms-transform: matrix(0.866,0.5,-0.5,0.866,0,0);
    -webkit-transform: matrix(0.866,0.5,-0.5,0.866,0,0);
    transform: matrix(0.866,0.5,-0.5,0.866,0,0);
}
</style>
</head>
<body>

<div>Hello. </div>

<div id="div2">Hello. </div>

</body>
</html>

上面的代碼呈現(xiàn)如下：

matrix()方法

rotateX()方法

我們可以使用 rotateX()方法以給定的度數圍繞其X軸旋轉元素。


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

div#div2 {
    -webkit-transform: rotateX(130deg);
    transform: rotateX(130deg);
}
</style>
</head>
<body>
    <div>Hello. </div>
    <div id="div2">Hello. </div>
</body>
</html>

上面的代碼呈現(xiàn)如下：

rotateX()方法

rotateY()方法

我們可以使用 rotateY()方法以給定的度數圍繞其Y軸旋轉元素。


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

div#div2 {
    -webkit-transform: rotateY(130deg);
    transform: rotateY(130deg);
}
</style>
</head>
<body>

    <div>Hello. </div>
    <div id="div2">Hello. </div>

</body>
</html>

上面的代碼呈現(xiàn)如下：

屬性	描述	CSS
transform-origin	設置轉換元素的位置	3
transform-style	設置轉換的樣式	3
transform	轉換的簡寫屬性	3

CSS3 2D變換

CSS轉換屬性

translate()方法

rotate()方法

scale()方法

skew() 方法

matrix()方法

rotateX()方法

rotateY()方法

相關屬性

推薦文章

推薦教程

推薦課程