Dalam CSS3, anda boleh menggunakan atribut transform dengan fungsi rotate3d(), rotateX(), rotateY() dan rotateZ() untuk mencapai kesan flip tiga dimensi Sintaksnya ialah "transform:rotate3d(. x,y,z, sudut )".
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.
Atribut transformasi menggunakan transformasi 2D atau 3D pada elemen. Sifat ini membolehkan kita memutar, menskala, mengalih atau mencondongkan elemen.
Apabila atribut ini digunakan bersama dengan empat fungsi rotateX(), rotateY(), rotateZ() dan rotate3d(), kesan flip tiga dimensi boleh dicapai.
X: Putar dari bawah ke atas berdasarkan paksi X kotak
Y: Putar dari kiri ke kanan berdasarkan paksi-y kotak
Z: Dengan mengambil bahagian tengah kotak sebagai asal, putar mengikut arah jam
Perihalan nilai dalam rotate3d(x ,y,z,angle):
x: ialah nilai antara 0 dan 1, terutamanya digunakan untuk menerangkan nilai vektor unsur berputar di sekeliling paksi X; 🎜>
)
<!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"><br>
<img src="1115.08.png">
</body>
</html>Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan flip tiga dimensi dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
