纯CSS3带倒影效果的图片翻转特效

创客云


这是一款纯css3带倒影效果的图片翻转特效。该特效在鼠标悬停图片时,可以翻转图片,同时图片还带有炫酷的倒影效果。
HTML结构

  1. <div class="scene">
  2.   <div class="card">
  3.     <div class="card__face card__face--front">
  4.       <img src="img/cnKl1Ykd5rZCVwm.jpg" />
  5.     </div>
  6.     <div class="card__face card__face--back">
  7.       <img src="img/cqyJiYlRwnTeHmj.jpg" />
  8.     </div>
  9.   </div>
  10.   <div class="card">
  11.     <div class="card__face card__face--front">
  12.       <img src="img/FLnzi5Kq4tkRZSm.jpg" />
  13.     </div>
  14.     <div class="card__face card__face--back">
  15.       <img src="img/buDT4YS6zUMfHst.jpg" />
  16.     </div>
  17.   </div>
  18.   <div class="card">
  19.     <div class="card__face card__face--front">
  20.       <img src="img/uXF1Kx7lzELB6wf.jpg" />
  21.     </div>
  22.     <div class="card__face card__face--back">
  23.       <img src="img/RtVq2wxQYySDb8L.jpg" />
  24.     </div>
  25.   </div>
  26. </div>

CSS样式
初始化时隐藏窗口内容

  1. body {
  2.   display: flex;
  3.   justify-content: center;
  4.   align-items: center;
  5.   height: 100vh;
  6.   background: black;
  7. }
  8.  
  9. .scene {
  10.   width: 1000px;
  11.   display: flex;
  12.   justify-content: space-between;
  13.   -webkit-perspective: 800px;
  14.           perspective: 800px;
  15. }
  16. .scene .card {
  17.   position: relative;
  18.   width: 240px;
  19.   height: 300px;
  20.   color: white;
  21.   cursor: pointer;
  22.   transition: 1s ease-in-out;
  23.   -webkit-transform-style: preserve-3d;
  24.           transform-style: preserve-3d;
  25. }
  26. .scene .card:hover {
  27.   -webkit-transform: rotateY(0.5turn);
  28.           transform: rotateY(0.5turn);
  29. }
  30. .scene .card .card__face {
  31.   position: absolute;
  32.   top: 0;
  33.   left: 0;
  34.   width: 100%;
  35.   height: 100%;
  36.   -webkit-backface-visibility: hidden;
  37.           backface-visibility: hidden;
  38.   transition: 1s ease-in-out;
  39.   -webkit-box-reflect: below 0 linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.4));
  40. }
  41. .scene .card .card__face img {
  42.   width: 240px;
  43.   height: 300px;
  44.   -o-object-fit: cover;
  45.      object-fit: cover;
  46. }
  47. .scene .card .card__face--back {
  48.   -webkit-transform: rotateY(0.5turn);
  49.           transform: rotateY(0.5turn);
  50. }

Codepen网址:https://codepen.io/alphardex/pen/ExaZgxp

演示地址 免费下载
本文由 CityMall 整理发布如需转载,请注明出处:https://www.22vd.com/55448.html
云模板

发表评论