HTML结构
<div class="scene"> <div class="card"> <div class="card__face card__face--front"> <img src="img/t1.png" /> </div> <div class="card__face card__face--back"> <img src="img/t1a.png" /> </div> </div> <div class="card"> <div class="card__face card__face--front"> <img src="img/t2.png" /> </div> <div class="card__face card__face--back"> <img src="img/t2a.png" /> </div> </div> <div class="card"> <div class="card__face card__face--front"> <img src="img/t3.png" /> </div> <div class="card__face card__face--back"> <img src="img/t3a.png" /> </div> </div> </div>
CSS样式
初始化时隐藏窗口内容。
body { display: flex; justify-content: center; align-items: center; height: 100vh; background: black; } .scene { width: 1000px; display: flex; justify-content: space-between; -webkit-perspective: 800px; perspective: 800px; } .scene .card { position: relative; width: 240px; height: 300px; color: white; cursor: pointer; transition: 1s ease-in-out; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .scene .card:hover { -webkit-transform: rotateY(0.5turn); transform: rotateY(0.5turn); } .scene .card .card__face { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: 1s ease-in-out; -webkit-box-reflect: below 0 linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.4)); } .scene .card .card__face img { width: 240px; height: 300px; -o-object-fit: cover; object-fit: cover; } .scene .card .card__face--back { -webkit-transform: rotateY(0.5turn); transform: rotateY(0.5turn); }