Rumah > Artikel > hujung hadapan web > Apakah kod flip untuk elemen css3
Apakah kod flip untuk elemen css3
- WBOYasal
- 2021-12-15 11:57:401653semak imbas
Kod: 1. "transform:rotateY(angle)", anda boleh menetapkan gaya flip elemen di sepanjang paksi Y; 2. "transform:rotateX(angle)", anda boleh menetapkan gaya flip daripada elemen di sepanjang paksi X 3. "transform:rotateZ(angle)" boleh menetapkan gaya flip elemen di sepanjang paksi Z.
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.
Apakah kod flip elemen css3
Dalam css, jika anda ingin mencapai kesan flip elemen, anda perlu gunakan atribut transform.
Atribut transformasi akan menghasilkan kesan paparan flip yang berbeza apabila digunakan dengan fungsi yang berbeza.
1. Atribut transformasi bekerjasama dengan fungsi rotateY() untuk menetapkan elemen supaya terbalik di sepanjang paksi Y.
Contohnya adalah seperti berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.img1{
transform:rotateY(180deg);
}
</style>
</head>
<body>
<img src="1118.02.png" class="img1" alt="Apakah kod flip untuk elemen css3" >
<p>上面是沿着Y轴翻转180度，下面是原图</p>
<img src="1118.02.png" alt="Apakah kod flip untuk elemen css3" >
</body>
</html>Hasil keluaran:
2. Atribut transformasi bekerjasama dengan fungsi rotateX(). untuk menetapkan elemen sepanjang X Axis terbalik.
Contoh adalah seperti berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.img1{
transform:rotateX(180deg);
}
</style>
</head>
<body>
<img src="1118.02.png" class="img1" alt="Apakah kod flip untuk elemen css3" >
<p>上面是沿着X轴翻转180度，下面是原图</p>
<img src="1118.02.png" alt="Apakah kod flip untuk elemen css3" >
</body>
</html>Hasil keluaran:
3 Atribut transformasi bekerjasama dengan fungsi rotateZ(). untuk menetapkan elemen sepanjang Paksi Z terbalik.
Contoh adalah seperti berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.img1{
transform:rotateZ(180deg);
}
</style>
</head>
<body>
<img src="1118.02.png" class="img1" alt="Apakah kod flip untuk elemen css3" >
<p>上面是沿着X轴翻转180度，下面是原图</p>
<img src="1118.02.png" alt="Apakah kod flip untuk elemen css3" >
</body>
</html>Hasil keluaran:
(Belajar perkongsian video: tutorial video css )
Atas ialah kandungan terperinci Apakah kod flip untuk elemen css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!