Bagaimana untuk mencapai kesan flip tiga dimensi dalam css3-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk mencapai kesan flip tiga dimensi dalam css3

WBOY

Lepaskan： 2022-01-24 13:37:43

asal

1680 orang telah melayarinya

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 )".

Bagaimana untuk mencapai kesan flip tiga dimensi dalam css3

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.

Cara mencapai kesan flip tiga dimensi dalam css3

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; 🎜>

Hasil keluaran:

tutorial video css

)

<!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>

Salin selepas log masuk

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!