css小案例-实现卡片翻转_css卡片翻转效果-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_65727637/article/details/142958482

使用的关键属性有：

transform-style: preserve-3d; 将卡片设置为3d，以便旋转
backface-visibility: hidden; 设置正反两面的背面不可见
transform: rotateY(180deg); 卡片旋转动画
transition: transform 1.5s; 过渡效果

具体步骤：

1、设置3d卡片

      .card {
        position: relative;
        transform-style: preserve-3d;
      }

2、添加卡片正反面内容和初始状态

    <div class="card">
      <div class="front">正面</div>
      <div class="back">反面</div>
    </div>

      .front,
      .back {
        position: absolute;
        backface-visibility: hidden;
      }

      .front {
        transform: rotateY(0deg);
      }
      .back {
        transform: rotateY(180deg);
      }

3、添加旋转动画和过渡效果

      .card:hover {
        transform: rotateY(180deg);
      }
      .card {
        position: relative;
        transform-style: preserve-3d;
        transition: transform 1.5s;
      }

4、完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .card {
            width: 200px;
            height: 200px;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 1.5s;
        }

        .front,
        .back {
            width: 100%;
            height: 100%;
            background-color: skyblue;
            position: absolute;
            backface-visibility: hidden;
        }

        .front {
            transform: rotateY(0deg);
        }

        .back {
            transform: rotateY(180deg);
        }

        .card:hover {
            transform: rotateY(180deg);
        }
    </style>
</head>

<body>
    <div class="card">
        <div class="front">正面</div>
        <div class="back">反面</div>
    </div>
</body>

</html>

5、效果展示

6、小案例——熙牛医疗官网

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    h2 {
      text-align: center;
    }

    .card {
      box-sizing: border-box;
      position: relative;
      width: 200px;
      height: 200px;
      transform-style: preserve-3d;
      transition: transform 1.5s;
    }

    .cardbox {
      box-sizing: border-box;
      width: 800px;
      height: 200px;
      display: flex;
      margin: auto;
    }

    .card-blue {
      background-color: #2f8cf9;
      border: solid 1px #2878d4;
    }

    .card-white {
      border: solid 1px #e2e2e2;
    }

    .front,
    .back {
      width: 200px;
      height: 200px;
      position: absolute;
      backface-visibility: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .front {
      transform: rotateY(0deg);
    }

    .back {
      transform: rotateY(180deg);
    }

    .card:hover {
      transform: rotateY(180deg);
    }

    img {
      margin-top: 20px;
    }

    .content {
      width: 140px;
      height: 100px;
      color: white;
      text-wrap: wrap;
      margin: auto;
    }
  </style>
</head>

<body>
  <h2>核心优势</h2>
  <div class="cardbox">
    <div class="card card-blue">
      <div class="front">
        <img src="../static/images/xiniu/1.png" alt="" />
        <p style="color: white">产品深度融合</p>
      </div>
      <div class="back">
        <div class="content">
          安全机制保障下的互联网化产品，更敏锐探索行业的切入点和融合点。
        </div>
      </div>
    </div>
    <div class="card card-white">
      <div class="front">
        <img src="../static/images/xiniu//2.png" alt="" />
        <p>领先算法能力</p>
      </div>
      <div class="back">
        <div class="content" style="color: black">
          基于强大算法能力，结合人工智能等技术，深入挖掘医疗大数据的价值。
        </div>
      </div>
    </div>
    <div class="card card-blue">
      <div class="front">
        <img src="../static/images/xiniu//3.png" alt="" />
        <p style="color: white">强大运营支撑</p>
      </div>
      <div class="back">
        <div class="content">
          基于用户流量群体，结合标签体系、数据分析等能力，探索运营新模式。
        </div>
      </div>
    </div>
    <div class="card card-white">
      <div class="front">
        <img src="../static/images/xiniu//4.png" alt="" />
        <p>持续创新应用</p>
      </div>
      <div class="back">
        <div class="content" style="color: black">
          长期与院士、院校合作，开展AI+领域探索实践与智慧新应用。
        </div>
      </div>
    </div>
  </div>
</body>

</html>