当前位置： 正文

图片倒影翻转效果CSS3特效

2020-01-29 未分类 2.18k 推广

图片倒影翻转效果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. }
  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 

阅读全文
常见问题
下载地址失效了怎么版？
客服会第一时间检查下载地址，并发送到您的注册邮箱。如未及时处理可联系客服QQ或邮箱。
导入演示被中断了想重新导入怎么办？
https://themege.net/23822.html
不懂导入演示数据？无法一键导入演示数据？
https://themege.net/16186.html
原文链接：https://themege.net/1338.html，转载请注明出处。
0

猜你喜欢

2023-09-09 1.25k

2022-11-30 1.22k

2022-11-23 730

2022-11-16 934

2022-08-14 1.04k

2022-08-13 1.08k

评论0

请先