Transformasi CSS3
Melalui transformasi CSS3, kita boleh menggerakkan, menskalakan, memutar, memanjangkan atau meregangkan elemen.
Sokongan penyemak imbas
IE10, FireFox dan Opera menyokong atribut transformasi. Chrome dan Safari memerlukan awalan -webkit-.
Nota: IE9 memerlukan awalan -ms-.
Transformasi 2D
Dalam bab ini anda akan mempelajari tentang transformasi 2D kaedah:
terjemah()
putar()
skala()
skew()
matriks()
kaedah translate()
Elemen bergerak dari kedudukan semasa, mengikut parameter anjakan kiri (koordinat x) dan atas (koordinat y) yang diberikan :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
/*translate方法位移*/
div {
width:100px;
height:80px;
background-color:orange;
position:absolute;
left:100px;
top:100px;
}
div.one {
transform:translate(30px,30px);
z-index:1;
}
div.two {
background-color:blue;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>kaedah rotate()
Jika sudut yang diberikan oleh elemen mengikut arah jam, nilai negatif dibenarkan, dan elemen akan diputar lawan jam.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div {
width: 150px;
height: 50px;
background-color: orange;
text-align: center;
position: absolute;
left: 100px;
top: 100px;
}
div.one {
transform: rotate(30deg);
-webkit-transform:rotate(30deg);
}
div.two {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>kaedah skala()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
left: 100px;
height: 100px;
}
div.one {
background-color: red;
transform: scale(0.5,0.5);
}
</style>
</head>
<body>
<div>
<div class="one"></div>
</div>
</body>
</html>kaedah condong()
Dengan kaedah skew(), elemen dicondongkan pada sudut tertentu, mengikut parameter garis mendatar (paksi X) dan garis menegak (paksi Y) yang diberikan:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:orange;
position:absolute;
left:100px;
top:100px;
}
div.one {
background-color:red;
transform:skew(30deg,10deg);
}
</style>
</head>
<body>
<div></div>
<div class="one"></div>
</body>
</html>kaedah matriks() Kaedah
matriks() menggabungkan semua kaedah transformasi 2D. Kaedah
matriks() mengambil enam parameter dan mengandungi fungsi matematik yang membolehkan anda: memutar, menskala, menggerakkan dan mencondongkan elemen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:orange;
position:absolute;
left:100px;
top:100px;
}
div.one {
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
background-color:red;
}
</style>
</head>
<body>
<div></div>
<div class="one"></div>
</body>
</html>Sifat penukaran baharu
Semua sifat penukaran disenaraikan di bawah:
Perihalan Harta
transformasi Sesuai untuk elemen transformasi 2D atau 3D 3 🎜>
Fungsi daripada enam nilaitranslate(x,y) Mentakrifkan transformasi 2D yang menggerakkan elemen di sepanjang paksi X dan Y.
translateX(n) Mentakrifkan transformasi 2D yang menggerakkan elemen sepanjang paksi-X.
translateY(n) Mentakrifkan transformasi 2D yang menggerakkan elemen di sepanjang paksi Y.
skala(x,y) Takrifkan transformasi penskalaan 2D untuk menukar lebar dan ketinggian elemen. scaleX(n) Mentakrifkan transformasi penskalaan 2D yang mengubah lebar elemen.
skalaY(n) Tentukan transformasi penskalaan 2D untuk menukar ketinggian elemen.
