ホームページ > 記事 > ウェブフロントエンド > CSSを使用して画像を反転する効果を実現する方法（コードは添付されています）
CSSを使用して画像を反転する効果を実現する方法（コードは添付されています）
- 不言オリジナル
- 2018-09-25 17:57:124410ブラウズ
この記事の内容は、CSS を使用して画像を反転する方法に関するものです (コード付き)。必要な方は参考にしていただければ幸いです。
具体的なレンダリングは次のとおりです:
3D 反転と配置に加えて、使用される主なテクノロジでは新しい属性も使用されます backface-visibility:visible|hidden;
この属性は主に、要素の裏側を表示するかどうかを設定するために使用されます。
具体的な手順は次のとおりです。
1. ページの本文
dc6dce4a544fdca2df29d5ac0ea9906b 77159b047218d7f27ceda3873a1c2fc8 c9436b31b245ae8ecaa1f2512760254b 16b28748ea4df4d9c2150843fecfba68
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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。