Rumah > Artikel > hujung hadapan web > Tutorial susun atur CSS: Cara terbaik untuk mencapai kesan peralihan rata

Tutorial susun atur CSS: Cara terbaik untuk mencapai kesan peralihan rata

PHPzasal: 2023-10-19 09:40:46906semak imbas

Tutorial reka letak CSS: Cara terbaik untuk mencapai kesan peralihan rata

Pengenalan:
Dalam reka bentuk web moden, pengenalan pelbagai animasi dan kesan peralihan boleh meningkatkan pengalaman pengguna dan meningkatkan interaktiviti halaman. Antaranya, kesan transformasi satah adalah salah satu kesan biasa dan popular, yang melaluinya kesan transformasi visual seperti putaran dan membalikkan elemen pada satah boleh dicapai. Artikel ini akan memperkenalkan kaedah susun atur CSS terbaik untuk mencapai kesan transformasi rata, dan juga memberikan contoh kod khusus untuk rujukan pembaca.

Buat struktur halaman:
Pertama, kita perlu mencipta struktur halaman HTML asas, yang akan berfungsi sebagai halaman contoh kami, seperti yang ditunjukkan di bawah:

<!DOCTYPE html>
<html>
<head>
 <title>平面转换效果示例</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div class="container">
     <div class="card">
         <div class="front">
             <h2>正面</h2>
         </div>
         <div class="back">
             <h2>背面</h2>
         </div>
     </div>
 </div>
</body>
</html>

Tambah gaya CSS:
Dalam direktori yang sama seperti HTML fail , buat fail CSS bernama style.css dan pautkannya ke halaman HTML. Kemudian, kita boleh menambah gaya pada fail CSS untuk mencapai kesan transformasi rata Kod khusus adalah seperti berikut:

.container {
 perspective: 1000px;
}
.card {
 position: relative;
 width: 200px;
 height: 200px;
 transform-style: preserve-3d;
 transition: transform 1s;
}
.front, .back {
 position: absolute;
 width: 100%;
 height: 100%;
 backface-visibility: hidden;
 transform-style: preserve-3d;
}
.front {
 background-color: #ffcc00;
}
.back {
 background-color: #33cc33;
 transform: rotateY(180deg);
}
.container:hover .card {
 transform: rotateY(180deg);
}

Penjelasan kod yang dihuraikan:
Pertama, kami menetapkan kesan perspektif untuk elemen bekas yang mengandungi kad. , melalui harta perspective untuk mencipta perspektif 3D. perspective 属性来创建一种3D视角。
然后，我们设置 .card 元素的基本样式，其宽度、高度的值可以根据具体需求进行调整。通过 transform-style 属性设置元素的3D转换样式，其中的 preserve-3d 值表示保留元素的3D转换效果。
此外，我们给正面元素 .front 和背面元素 .back 添加了一些基本样式，包括宽度、高度和背景颜色。
然后，我们使用 backface-visibility 属性设置了正反面元素的可见性，并使用 transform 属性给背面元素 .back 添加了一个旋转效果，使其翻转180度。
最后，通过为 .container 元素添加 :hover 伪类选择器，当鼠标悬停在容器元素上时，触发 transform

.card

transform-style

preserve-3d

Selain itu, kami menambahkan beberapa gaya asas pada elemen hadapan .depan dan elemen belakang .belakang, termasuk lebar, tinggi dan warna latar belakang.

Kemudian, kami menggunakan atribut backface-visibility untuk menetapkan keterlihatan elemen depan dan belakang, dan menggunakan atribut transform untuk menambah elemen backface . back Mencipta kesan putaran, membalikkannya 180 darjah.

Akhir sekali, dengan menambahkan pemilih kelas pseudo :hover pada elemen .container, apabila tetikus melayang di atas elemen bekas, cetuskan transform Kesan putaran atribut.

🎜Contoh paparan kesan: 🎜Buka fail HTML dalam penyemak imbas, tuding tetikus di atas kad dan anda boleh melihat pelaksanaan akhir kesan transformasi pesawat. 🎜🎜🎜Kesimpulan: 🎜Melalui langkah di atas, kami berjaya melaksanakan kaedah susun atur CSS terbaik untuk kesan peralihan rata. Dengan menguasai teknologi ini, kami boleh menambahkan lebih banyak kesan dinamik pada reka bentuk web, meningkatkan pengalaman pengguna dan mencapai kesan visual yang lebih baik. Saya harap tutorial ini membantu anda Jika anda mempunyai sebarang pertanyaan, sila tanya saya. 🎜

Atas ialah kandungan terperinci Tutorial susun atur CSS: Cara terbaik untuk mencapai kesan peralihan rata. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html 选择器伪类 transform

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Langkah untuk melaksanakan kesan tab lungsur turun bar navigasi responsif menggunakan CSS tulenArtikel seterusnya：Langkah untuk melaksanakan kesan tab lungsur turun bar navigasi responsif menggunakan CSS tulen

Artikel berkaitan

Lihat lagi