1. 主题阁汉化首页
  2. 特效代码

图片倒影翻转效果CSS3特效

图片倒影翻转效果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.   justifycontentcenter;
  4.   align-items: center;
  5.   height: 100vh;
  6.   backgroundblack;
  7. }
  8. .scene {
  9.   width1000px;
  10.   display: flex;
  11.   justifycontent: space-between;
  12.   -webkit-perspective: 800px;
  13.           perspective: 800px;
  14. }
  15. .scene .card {
  16.   positionrelative;
  17.   width240px;
  18.   height300px;
  19.   colorwhite;
  20.   cursorpointer;
  21.   transition: 1s ease-in-out;
  22.   -webkit-transform-style: preserve-3d;
  23.           transform-style: preserve-3d;
  24. }
  25. .scene .card:hover {
  26.   -webkit-transform: rotateY(0.5turn);
  27.           transform: rotateY(0.5turn);
  28. }
  29. .scene .card .card__face {
  30.   positionabsolute;
  31.   top: 0;
  32.   left: 0;
  33.   width: 100%;
  34.   height: 100%;
  35.   -webkit-backface-visibilityhidden;
  36.           backface-visibilityhidden;
  37.   transition: 1s ease-in-out;
  38.   -webkit-box-reflect: below 0 linear-gradient(transparenttransparent, rgba(0, 0, 0, 0.4));
  39. }
  40. .scene .card .card__face img {
  41.   width240px;
  42.   height300px;
  43.   -o-object-fit: cover;
  44.      object-fit: cover;
  45. }
  46. .scene .card .card__face–back {
  47.   -webkit-transform: rotateY(0.5turn);
  48.           transform: rotateY(0.5turn);
  49. }

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

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布,如若转载,请注明出处:https://themege.net/1338.html。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

发表评论

登录后才能评论
联系我们

联系我们

在线咨询:点击这里给我发消息

邮件:themege@163.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信
关注微信
分享本页
返回顶部