纯css实现图片带倒影效果的hover翻转特效

最新推荐文章于 2023-04-03 10:51:03 发布

生活的小欢呼

最新推荐文章于 2023-04-03 10:51:03 发布

阅读量1.1k

点赞数 1

分类专栏： vue CSS 文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/XiaoHuanhu/article/details/122731026

版权

vue 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

效果图：

<template>
  <div class="glassReflection">
    <div class="scene">
      <div class="card">
        <div class="showCard showCardFront">
          <img src="../showFiles/3.png" />
        </div>
        <div class="showCard showCardBack">
          <img src="../showFiles/2.jpg" />
        </div>
      </div>
      <div class="card">
        <div class="showCard showCardFront">
          <img src="../showFiles/4.jpg" />
        </div>
        <div class="showCard showCardBack">
          <img src="../showFiles/5.jpg" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.glassReflection {
  width: 60%;
  height: 95%;
  margin: 1%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
}
.scene {
  width: 90%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  /* perspective: 800px; */
}
.card {
  position: relative;
  width: 15rem;
  height: 16rem;
  color: white;
  cursor: pointer;
  transition: 1s ease-in-out;
  transform-style: preserve-3d;
}
/* 固定宽高的父元素触发，子元素翻转，如果直接对元素hover触发，元素翻转过程中，
元素区域变小，光标很有可能就脱离元素，造成不顺畅 */

.card:hover .showCardFront {
  transform: rotateY(0.5turn);
}
.card:hover .showCardBack {
  transform: rotateY(0);
}
.showCard {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: 1s ease-in-out;
  /* 倒影(-webkit-box-reflect)属性值有：dirrection-方向:above向上，below向下，left向左，right向右。
  offset距离：可以是数值，也可以是百分比 */
  -webkit-box-reflect: below 0
    linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.4));
}
img {
  width: 15rem;
  height: 16rem;
  -o-object-fit: cover;
  object-fit: cover;
}
.showCardBack {
  transform: rotateY(0.5turn);
}
</style>