Rumah > Artikel > hujung hadapan web > Bagaimana untuk mencapai kesan flip kad dalam css3
Bagaimana untuk mencapai kesan flip kad dalam css3
- WBOYasal
- 2022-03-22 16:41:222744semak imbas
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);}}".
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;
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>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!