css 利用动画实现旋转卡片

最新推荐文章于 2024-04-12 10:14:17 发布

青田。

最新推荐文章于 2024-04-12 10:14:17 发布

阅读量507

点赞数 1

分类专栏： html css 文章标签： css 动画 css3

本文链接：https://blog.csdn.net/Tianxiaoxixi/article/details/125105867

版权

css 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

html

6 篇文章 0 订阅

订阅专栏

效果图：

代码：

需要注意perspective属性https://www.w3school.com.cn/cssref/pr_perspective.asp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css动画旋转卡片效果</title>
</head>
<body>
    <div class="re-box">
        <div class="re-item">
          <div class="re-item-front">
            <img src="https://img1.baidu.com/it/u=1887300482,1122059733&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="123" />
            <div class="text">正面</div>
          </div>
          <div class="re-item-back">
            <img src="https://img1.baidu.com/it/u=1274368820,2961871675&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=863" alt="456" />
            <div class="text">反面</div>
          </div>
        </div>
      </div>
</body>
</html>
<style lang="scss" scoped>
  
    .text{
        margin: 5px;
        width: 40px;
        letter-spacing: 2px;
    }
    .re-box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  
    .re-item {
      /* perspective 属性定义 3D 元素距视图的距离，以像素计。 */
      perspective: 500;
    }
  
    .re-item img {
        width: 220px;
        height: 340px;
    }
  
    .re-item-front {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #fff;
      perspective: 1000;
      backface-visibility: hidden;
      transition: all 1.5s;
      box-shadow: rgba(50, 50, 50, 0.2) 0 0 15px;
      overflow: hidden;
      animation: mymove 6s linear infinite;
    }
  
    .re-item-back {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #fff;
      perspective: 1000;
      backface-visibility: hidden;
      /* 该属性定义当元素不面向屏幕时是否可见 */
      transition: all 1.5s;
      box-shadow: rgba(50, 50, 50, 0.2) 0 0 15px;
      overflow: hidden;
      animation: mymove1 6s linear infinite;
  
    }
    .re-item-back {
      position: relative;
      transform: rotateY(-180deg);
    }
  
    @keyframes mymove {
      from {
        transform: rotateY(0deg);
      }
  
      to {
        transform: rotateY(-360deg);
      }
    }
  
    @keyframes mymove1 {
      from {
        transform: rotateY(-180deg);
      }
  
      to {
        transform: rotateY(-540deg);
      }
    }
  </style>