[CSS]div鼠标移入翻转示例

最新推荐文章于 2024-04-14 21:53:28 发布

July twelve

最新推荐文章于 2024-04-14 21:53:28 发布

阅读量334

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/yys190418/article/details/124475262

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<template>
  <div class="body">
    <div class="box">
      <div class="flipper">
        <div class="front">123</div>
        <div class="back">456</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.body {
  width: 100%;
  height: 100%;
  background-color: aquamarine;
  display: flex;
  justify-content: center;
  align-items: center;
  .box {
    width: 200px;
    height: 240px;
    perspective: 1000;
  }
  .box:hover .flipper {
    transform: rotateY(180deg);
  }
  .flipper,
  .front,
  .back {
    width: 100%;
    height: 100%;
  }
  .flipper {
    transition: 1.2s;
    transform-style: preserve-3d;
  }
  .front,
  .back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
  }
  .front {
    background: orange;
  }
  .back {
    background: blueviolet;
    transform: rotateY(180deg);
  }
}
</style>