免費(fèi)AI編程助手
CSS3 2D變換
CSS變換改變?cè)氐奈恢煤托螤睢?/p>
CSS變換可以將仿射線性變換應(yīng)用于HTML元素。
這些變換包括在平面和3D空間中的旋轉(zhuǎn)，傾斜，縮放和平移。
CSS轉(zhuǎn)換屬性
我們可以使用以下兩個(gè)屬性來(lái)定義CSS變換。
- transform - 指定要應(yīng)用于元素的變換。
- transform-origin - 指定原點(diǎn)的位置。默認(rèn)情況下，它在元素的中心。
translate()方法
我們可以使用translate()方法從當(dāng)前位置移動(dòng)元素。
在下面的代碼中 translate(50px，100px)移動(dòng)元素從左邊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()方法以給定的度數(shù)順時(shí)針旋轉(zhuǎn)元素。
我們也可以使用負(fù)值逆時(shí)針旋轉(zhuǎn)元素。
在下面的代碼中 rotate(30deg)將元素順時(shí)針旋轉(zhuǎn)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)如下：
scale()方法
我們可以使用scale()方法來(lái)增加或減少元素大小。
我們可以改變寬度(X軸)和高度(Y軸)。
在下面的代碼中 scale(2,4)將寬度轉(zhuǎn)換為原始大小的兩倍，高度為其原始尺寸的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)如下：
skew() 方法
我們可以使用skew()方法在給定的角度轉(zhuǎn)動(dòng)元素。
我們可以沿水平(X軸)和垂直(Y軸)線旋轉(zhuǎn)元素。
<!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)如下：
matrix()方法
matrix()方法將所有的2D變換方法組合成一個(gè)。
矩陣方法采用六個(gè)參數(shù)，包含數(shù)學(xué)函數(shù)，它允許您：旋轉(zhuǎn)，縮放，移動(dòng)（平移）和偏斜元素。
<!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)如下：
rotateX()方法
我們可以使用 rotateX()方法以給定的度數(shù)圍繞其X軸旋轉(zhuǎn)元素。
<!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)如下：
rotateY()方法
我們可以使用 rotateY()方法以給定的度數(shù)圍繞其Y軸旋轉(zhuǎn)元素。
<!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)如下：
相關(guān)屬性
| 屬性 | 描述 | CSS |
|---|---|---|
| transform-origin | 設(shè)置轉(zhuǎn)換元素的位置 | 3 |
| transform-style | 設(shè)置轉(zhuǎn)換的樣式 | 3 |
| transform | 轉(zhuǎn)換的簡(jiǎn)寫屬性 | 3 |
更多建議：