Cara menggunakan css3 untuk mencapai kesan membalikkan imej

CSS3 ialah bahagian penting dalam reka bentuk web. Antaranya, melalui penukaran 3D CSS3, kesan flipping gambar boleh dicapai, menambah dinamik dan fesyen pada halaman web. Mari kita lihat cara melaksanakan kesan membalikkan imej CSS3.

Langkah-langkah pelaksanaan

1 Mula-mula, anda perlu memasukkan elemen imej melalui kod HTML, seperti yang ditunjukkan di bawah:

<div class="container">
    <img src="image.jpg" alt="image" />
</div>

di mana bekas adalah bekas yang digunakan untuk mengandungi imej. .

2. Seterusnya, tetapkan gaya untuk bekas dan img melalui kod CSS, seperti yang ditunjukkan di bawah:

.container {
    perspective: 800px;
    /* 把container容器设置成3D透视 */
}
img {
    width: 100%;
    height: 100%;
    /* 设置图片的宽高 */
    position: absolute;
    backface-visibility: hidden;
    /* 隐藏图片的背面 */
    transition: transform .6s ease;
    /* 设置动画效果 */
}

Antaranya, atribut perspektif adalah untuk menetapkan jarak perspektif bekas, dan atribut keterlihatan muka belakang Ia digunakan untuk mengawal sama ada untuk memaparkan bahagian belakang elemen, dan atribut peralihan digunakan untuk mencapai kesan animasi bagi membalikkan imej.

3 Kemudian, tetapkan kesan flip untuk gambar. Tetapkan gaya untuk bahagian hadapan dan belakang masing-masing, seperti yang ditunjukkan di bawah:

img {
    transform-style: preserve-3d;
    /* 设置为3D */
}
img:hover {
    transform: rotateY(180deg);
    /* 翻转180度 */
}
img:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    /* 翻转180度 */
}
img:hover:after {
    transform: rotateY(0deg);
    /* 返回原来的状态 */
}

Di sini atribut transformasi digunakan untuk menetapkan sudut flip dan atribut kandungan digunakan untuk menambah "elemen pseudo" maya di belakang elemen untuk meningkatkan fleksibiliti Gaya.

4 Akhir sekali, tetapkan bekas kepada perspektif dan tetapkan kesan flip untuk imej, seperti yang ditunjukkan di bawah:

.container:hover img {
    transform: rotateY(180deg);
    /* 翻转180度 */
}
.container:hover img:after {
    transform: rotateY(0deg);
    /* 返回原来的状态 */
}

Dengan cara ini, apabila tetikus melayang di atas bekas, imej akan Ia akan diterbalikkan dalam 3D.

Ringkasan

Kesan menyelak imej CSS3 boleh menambah perasaan dinamik dan bergaya pada halaman web, menjadikan halaman web kelihatan lebih menarik dan terang. Melalui langkah-langkah di atas, kami boleh melaksanakan kesan membalikkan imej CSS3 dengan mudah.

Atas ialah kandungan terperinci Cara menggunakan css3 untuk mencapai kesan membalikkan imej. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!