背靠背效果
Posted yuanxiangguang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了背靠背效果相关的知识，希望对你有一定的参考价值。
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 5 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 6 <title>背靠背</title> 7 <style> 8 /* div */ 9 /* 当元素不面向屏幕时是否可见 */ 10 /* backface-visibility: visible; */ 11 /* */ 12 body 13 perspective: 500px; 14 15 div 16 width: 200px; 17 height: 300px; 18 margin: 200px auto; 19 position: relative; 20 transform-style: preserve-3d; 21 22 23 div img 24 width: 200px; 25 height: 300px; 26 position: absolute; 27 left: 0; 28 top: 0; 29 /* 过度效果 */ 30 transition: all 2s linear; 31 32 33 div img:first-child 34 z-index: 1; 35 backface-visibility: hidden; 36 37 div:hover img 38 transform: rotateY(180deg) 39 40 </style> 41 </head> 42 <body> 43 <div> 44 45 <img src="images/1.jpg" alt="" width="200" height="300"/> 46 <img src="images/2.jpg" alt="" width="200" height="300"/> 47 48 </div> 49 50 </body> 51 </html>
以上是关于背靠背效果的主要内容，如果未能解决你的问题，请参考以下文章