纯CSS实现图片左右翻转效果（附代码）-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

纯CSS实现图片左右翻转效果（附代码）

青灯夜游

Feb 25, 2021 am 10:20 AM

css

纯CSS实现图片左右翻转效果（附代码）

【推荐教程：CSS视频教程】

CSS 翻转图片主要用到的技术除了3D翻转和定位，还用到了一个属性 backface-visibility：visable|hidden;该属性主要是用来设定元素背面是否可见。

效果图如下：

具体的步骤如下：

1、写出页面主体，

<div>
   <img src="Images/b.jpg" alt="">
   <img src="Images/c.jpg" alt="">
</div>

2、通过定位使两张图片叠加在一起

div img {
            width: 250px;
            height: 170px;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 1s;
        }

3、设置第一张图片背面不可见

div img:first-child {
            z-index: 1;
            backface-visibility: hidden;
        }

4、添加旋转180度

div:hover img {
            transform: rotateY(180deg);
        }

完整代码：

<!DOCTYPE html>
<html>
<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>
        /* backface-visibility */
        
        div {
            width: 250px;
            height: 170px;
            margin: 100px auto;
            position: relative;
        }
        
        div img {
            width: 250px;
            height: 170px;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 1s;
        }
        
        div img:first-child {
            z-index: 1;
            backface-visibility: hidden;
        }
        
        div:hover img {
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
    <div>
        <img src="Images/b.jpg" alt="">
        <img src="Images/c.jpg" alt="">
    </div>
</body>
</html>

更多编程相关知识，请访问：编程视频！！

Atas ialah kandungan terperinci 纯CSS实现图片左右翻转效果（附代码）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan

Artikel ini dikembalikan pada:segmentfault. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel Berkaitan

Kemas kini 'CSS4'Apr 11, 2025 pm 12:05 PM

Sejak saya mula -mula berbunyi pada perkara CSS4¹, ada lebih banyak perbincangan di atasnya. Saya akan mengulangi pemikiran kegemaran saya dari orang lain di sini. Ada

Tiga jenis kodApr 11, 2025 pm 12:02 PM

Setiap kali saya memulakan projek baru, saya menyusun kod yang saya cari dalam tiga jenis, atau kategori jika anda suka. Dan saya fikir jenis ini boleh digunakan

HTTPS mudah!Apr 11, 2025 am 11:51 AM

Saya ' telah bersalah secara terbuka merungut kerumitan HTTPS. Pada masa lalu, saya membeli sijil SSL dari vendor pihak ketiga dan menghadapi masalah

Panduan Atribut Data HTMLApr 11, 2025 am 11:50 AM

Semua yang anda ingin tahu mengenai atribut data dalam HTML, CSS, dan JavaScript.

Memahami kebolehubahan dalam JavaScriptApr 11, 2025 am 11:47 AM

Sekiranya anda tidak bekerja dengan kebolehubahan dalam JavaScript sebelum ini, anda mungkin mudah mengelirukan dengan memberikan pembolehubah kepada nilai baru, atau penugasan semula.

Input bentuk gaya tersuai dengan ciri CSS modenApr 11, 2025 am 11:45 AM

Ia mungkin sepenuhnya untuk membina kotak semak tersuai, butang radio, dan suis bertukar hari ini, sambil tetap semantik dan boleh diakses. Kami tidak memerlukan

Watak nota kakiApr 11, 2025 am 11:34 AM

Terdapat watak nombor superset khas yang kadang -kadang sesuai untuk nota kaki. Di sini mereka:

Cara membuat pemasa undur animasi dengan HTML, CSS dan JavaScriptApr 11, 2025 am 11:29 AM

Pernahkah anda memerlukan pemasa undur dalam projek? Untuk sesuatu seperti itu, mungkin semula jadi untuk mencapai plugin, tetapi sebenarnya lebih banyak lagi

See all articles