ホームページ >ウェブフロントエンド >CSSチュートリアル >画像の左右反転効果を実現する純粋な CSS (コードが添付されています)

画像の左右反転効果を実現する純粋な CSS (コードが添付されています)

青灯夜游転載: 2021-02-25 10:20:124817ブラウズ

CSS 画像を反転するために使用される主なテクノロジは、3D 反転と配置だけでなく、属性 backface-visibility:visible|hidden;この属性は主に、要素の背面が表示されるかどうかを設定するために使用されます。

レンダリングは次のとおりです:

画像の左右反転効果を実現する純粋な CSS (コードが添付されています)

具体的な手順は次のとおりです:

1. ページの本文を記述します。

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

2. 位置を調整して 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>

プログラミング関連の知識については、プログラミングビデオをご覧ください。！

以上が画像の左右反転効果を実現する純粋な CSS (コードが添付されています)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css

声明：

この記事はsegmentfault.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：CSSで行間を調整する方法次の記事：CSSで行間を調整する方法

続きを見る