写一个类3d卡片翻转效果

原创已于 2023-02-22 15:49:37 修改 · 226 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#3d #javascript #css

于 2023-02-22 14:42:57 首次发布

CSS 专栏收录该内容

6 篇文章

订阅专栏

该HTML代码示例展示了如何使用CSS实现一个3D翻转效果，当鼠标悬停在容器上时，两张图片会进行翻转，创建出一种动态的视觉体验。这种技术常用于增强网页的交互性和用户体验。

<!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>Document</title>
    <style>
      body {
        height: 100vh;
        /* 设置3d视距 */
        perspective: 1000px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .container {
        
        width: 400px;
        height: 310px;
        /* position: relative; */

        /* 开启3变换模式 */
        transform-style: preserve-3d;
      }
      img {
        width: 100%;
        height: 100%;
        position: absolute;
        /* 图片背面隐藏 */
        backface-visibility: hidden;
        transition: 1s all ease-in-out;

        border-radius: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0);
        overflow: hidden;
      }

      .container:hover img:nth-child(1) {
        transform: rotateY(-180deg);
      }
      img:nth-child(2) {
        transform: rotateY(180deg);
      }
      .container:hover img:nth-child(2) {
        transform: rotateY(0deg);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <img src="./assets/3.jpg" alt="" />
      <img src="./assets/1.jpg" alt="" />
    </div>
  </body>
</html>