CSS3 2D 轉(zhuǎn)換
CSS3 2D 轉(zhuǎn)換
CSS3 轉(zhuǎn)換
CSS3轉(zhuǎn)換，我們可以移動，比例化，反過來，旋轉(zhuǎn)，和拉伸元素。
它是如何工作？
變換的效果，讓某個(gè)元素改變形狀，大小和位置。
您可以轉(zhuǎn)換您使用2D或3D元素。
2D 轉(zhuǎn)換
在本章您將了解2D變換方法：
translate()
rotate()
scale()
skew()
matrix()
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
div
{
width:200px;
height:100px;
background-color: #aeffb1;
/* Rotate div */
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello</div>
</body>
</html>運(yùn)行程序嘗試一下
translate() 方法
translate()方法，根據(jù)左(X軸)和頂部(Y軸)位置給定的參數(shù)，從當(dāng)前元素位置移動。
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
div
{
width:100px;
height:75px;
background-color: #9dfff2;
border:1px solid #e81d26;
}
div#div2
{
transform:translate(50px,100px);
-ms-transform:translate(50px,100px); /* IE 9 */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>這是一個(gè)div元素</div>
<div id="div2">Hello. 這也是一個(gè)div元素</div>
</body>
</html>運(yùn)行程序嘗試一下
提示：translate值（50px，100px）是從左邊元素移動50個(gè)像素，并從頂部移動100像素。
rotate() 方法
rotate()方法，在一個(gè)給定度數(shù)順時(shí)針旋轉(zhuǎn)的元素。負(fù)值是允許的，這樣是元素逆時(shí)針旋轉(zhuǎn)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>你好。這是一個(gè) DIV 元素。</div>
<div id="div2">你好。這是一個(gè) DIV 元素。</div>
</body>
</html>提示：rotate值（30deg）元素順時(shí)針旋轉(zhuǎn)30度。
運(yùn)行程序嘗試一下
scale() 方法
scale()方法，該元素增加或減少的大小，取決于寬度（X軸）和高度（Y軸）的參數(shù)：
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
margin:100px;
transform:scale(2,4);
-ms-transform:scale(2,4); /* IE 9 */
-webkit-transform:scale(2,4); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>提示：scale（2,4）轉(zhuǎn)變寬度為原來的大小的2倍，和其原始大小4倍的高度。
運(yùn)行程序嘗試一下
skew() 方法
skew()方法，該元素會根據(jù)橫向（X軸）和垂直（Y軸）線參數(shù)給定角度：
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg); /* IE 9 */
-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>提示：skew(30deg,20deg)是繞X軸和Y軸周圍20度30度的元素。
運(yùn)行程序嘗試一下
matrix() 方法
matrix()方法和2D變換方法合并成一個(gè)。
matrix 方法有六個(gè)參數(shù)，包含旋轉(zhuǎn)，縮放，移動（平移）和傾斜功能。
實(shí)例
利用matrix()方法旋轉(zhuǎn)div元素30°
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>運(yùn)行程序嘗試一下
新轉(zhuǎn)換屬性
以下列出了所有的轉(zhuǎn)換屬性:
| Property | 描述 | CSS |
|---|---|---|
| transform | 適用于2D或3D轉(zhuǎn)換的元素 | 3 |
| transform-origin | 允許您更改轉(zhuǎn)化元素位置 | 3 |
2D 轉(zhuǎn)換方法
| 函數(shù) | 描述 |
|---|---|
| matrix(n,n,n,n,n,n) | 定義 2D 轉(zhuǎn)換，使用六個(gè)值的矩陣。 |
| translate(x,y) | 定義 2D 轉(zhuǎn)換，沿著 X 和 Y 軸移動元素。 |
| translateX(n) | 定義 2D 轉(zhuǎn)換，沿著 X 軸移動元素。 |
| translateY(n) | 定義 2D 轉(zhuǎn)換，沿著 Y 軸移動元素。 |
| scale(x,y) | 定義 2D 縮放轉(zhuǎn)換，改變元素的寬度和高度。 |
| scaleX(n) | 定義 2D 縮放轉(zhuǎn)換，改變元素的寬度。 |
| scaleY(n) | 定義 2D 縮放轉(zhuǎn)換，改變元素的高度。 |
| rotate(angle) | 定義 2D 旋轉(zhuǎn)，在參數(shù)中規(guī)定角度。 |
| skew(x-angle,y-angle) | 定義 2D 傾斜轉(zhuǎn)換，沿著 X 和 Y 軸。 |
| skewX(angle) | 定義 2D 傾斜轉(zhuǎn)換，沿著 X 軸。 |
| skewY(angle) | 定義 2D 傾斜轉(zhuǎn)換，沿著 Y 軸。 |
