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

Bagaimana untuk mencapai kesan flip kad dalam css3

WBOY

Lepaskan： 2022-03-22 16:44:03

asal

2741 orang telah melayarinya

Kaedah: 1. Gunakan atribut animasi untuk mengikat animasi flip pada elemen kad 2. Gunakan peraturan "@keyframes" dan atribut transform untuk menetapkan tindakan animasi flip elemen Sintaks ialah "@keyframes nama {100%{transform: rotateY(flip angle);}}".

Bagaimana untuk mencapai kesan flip kad dalam css3

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

Cara mencapai kesan flip kad dalam css3

Atribut transformasi menggunakan transformasi 2D atau 3D pada elemen. Sifat ini membolehkan kita memutar, menskala, mengalih atau mencondongkan elemen.

rotateX(angle) mentakrifkan putaran 3D di sepanjang paksi X.

putarY(sudut) mentakrifkan putaran 3D di sepanjang paksi Y.

putarZ(sudut) mentakrifkan putaran 3D di sepanjang paksi Z.

Peraturan @keyframes membolehkan anda mencipta animasi.

Animasi dicipta dengan menukar secara beransur-ansur satu set gaya CSS kepada yang lain.

Atribut animasi ialah atribut singkatan untuk menetapkan enam atribut animasi:

animation: name duration timing-function delay iteration-count direction;

Salin selepas log masuk

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>
img{
animation:fadenum 5s ;
}
@keyframes fadenum{
   100%{transform:rotateY(360deg);}
}
</style>
</head>
<body>
<img src="1118.01.png" style="width:150px;height:200px;">
</body>
</html>

Salin selepas log masuk

Hasil output

(Mempelajari perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan flip kad dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!