Transformasi 2D CSS3
Transformasi CSS3
Transformasi CSS3, kita boleh menggerakkan, menskalakan, membalikkan, memutar dan elemen regangan.
Bagaimana ia berfungsi?
Kesan transformasi membolehkan elemen menukar bentuk, saiz dan kedudukannya.
Anda boleh menukar elemen anda menggunakan 2D atau 3D.
Transformasi 2D
Dalam bab ini anda akan belajar tentang kaedah transformasi 2D:
terjemah()
putar()
skala()
skew()
matriks()
Instance
rreeeJalankan atur cara Cuba kaedah
translate()
translate() kaedah, berdasarkan parameter yang diberikan oleh kiri (paksi-X) dan atas (Y- paksi) kedudukan, daripada elemen semasa Kedudukan bergerak.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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>Jalankan program dan cuba
Petua: terjemah value ( 50px, 100px) sedang mengalihkan elemen 50 piksel dari kiri dan 100 piksel dari atas.
kaedah rotate()
kaedah rotate(), memutarkan elemen mengikut arah jam mengikut darjah tertentu. Nilai negatif dibenarkan, yang memutarkan elemen mengikut lawan jam.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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>这是一个div元素</div>
<div id="div2">Hello. 这也是一个div元素</div>
</body>
</html>Petunjuk: nilai putaran (30deg) elemen berputar 30 darjah mengikut arah jam.
Jalankan atur cara dan cuba
kaedah skala()
kaedah skala(), elemen bertambah atau Saiz yang dikecilkan bergantung pada parameter lebar (paksi-X) dan ketinggian (paksi-Y):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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>你好。这是一个 DIV 元素。</div>
<div id="div2">你好。这是一个 DIV 元素。</div>
</body>
</html>Petunjuk: skala(2,4) menukar lebar kepada 2 kali ganda saiz asal , dan ketinggian 4 kali ganda saiz asal.
Jalankan program dan cuba
kaedah condong()
kaedah condong(), elemen akan dilaraskan mengikut parameter garisan Mendatar (paksi-X) dan menegak (paksi-Y) sudut yang diberikan:
Contoh
<!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>Petua : skew(30deg,20deg) ialah elemen yang 20 darjah dan 30 darjah mengelilingi paksi-X dan paksi-Y.
Jalankan program dan cuba
kaedah matriks()
Kaedah Matriks() dan 2D kaedah transformasi digabungkan menjadi satu.
Kaedah matriks mempunyai enam parameter, termasuk fungsi putaran, penskalaan, pergerakan (terjemahan) dan kecondongan.
Contoh
Gunakan kaedah matriks() untuk memutarkan elemen div 30°
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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>Jalankan atur cara dan cuba ia
Sifat transformasi baharu
Semua sifat transformasi disenaraikan di bawah:
| Property | 描述 | CSS |
|---|---|---|
| transform | 适用于2D或3D转换的元素 | 3 |
| transform-origin | 允许您更改转化元素位置 | 3 |
Kaedah penukaran 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) | 定义 2D 倾斜转换，沿着 X 和 Y 轴。 |
| skewX(angle) | 定义 2D 倾斜转换，沿着 X 轴。 |
| skewY(angle) | 定义 2D 倾斜转换，沿着 Y 轴。 |
