Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Bagaimana untuk menetapkan flipping imej dalam html5 dan css3
Bagaimana untuk menetapkan flipping imej dalam html5 dan css3
- WBOYasal
- 2022-01-23 17:11:273257semak imbas
Dalam HTML5 dan CSS3, anda boleh menggunakan atribut transform untuk menetapkan flip imej Atribut ini boleh berputar, skala dan operasi lain pada elemen Apabila atribut ini digunakan bersama dengan fungsi rotateX(). anda boleh menetapkan gaya flip menegak elemen , sintaksnya ialah "elemen {transform:rotateX(flip angle);}".
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.
Cara untuk menyediakan pembalikan imej dalam HTML5 dan CSS3
Untuk mencapai kesan membalikkan imej, anda boleh menggunakan atribut transformasi Atribut transformasi boleh berputar, berskala, bergerak, condong atau flip elemen beroperasi.
Apabila atribut digunakan bersama dengan fungsi rotateX(), anda boleh menetapkan gaya membalikkan menegak elemen.
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="1115.08.png" class="img1" alt="Bagaimana untuk menetapkan flipping imej dalam html5 dan css3" ><br>
<img src="1115.08.png" alt="Bagaimana untuk menetapkan flipping imej dalam html5 dan css3" >
</body>
</html>Hasil keluaran:
Tutorial yang disyorkan: "video html tutorial》
Atas ialah kandungan terperinci Bagaimana untuk menetapkan flipping imej dalam html5 dan css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!