使用 HTML 和 CSS 创建 3D 翻转按钮(1)

📌 相关文章

📜 使用 HTML 和 CSS 创建 3D 翻转按钮(1)

📅 最后修改于: 2023-12-03 14:49:40.301000 🧑 作者: Mango

使用 HTML 和 CSS 创建 3D 翻转按钮

在网站上增加一些动态效果会让它看起来更加生动有趣，而翻转按钮是其中一种很受欢迎的效果。本文将介绍如何使用 HTML 和 CSS 来创建一个 3D 翻转按钮。

HTML 结构

我们首先需要创建一个包含两个面的容器，然后在每个面中放置我们想要展示的内容。

<div class="flip-container">
  <div class="flipper">
    <div class="front">
      <!-- 前面的内容-->
    </div>
    <div class="back">
      <!-- 后面的内容-->
    </div>
  </div>
</div>

flip-container：一个包含两个面的容器。
flipper：翻转元素。
front：前面的面。
back：背面的面。

CSS 样式

我们使用 CSS 来实现按钮的 3D 效果。具体而言，我们需要为容器、翻转元素和在每个面中放置的内容指定一些样式。

/* 容器 */
.flip-container {
  perspective: 1000px;
  width: 200px;
  height: 200px;
}

/* 翻转元素 */
.flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s ease-in-out;
}

/* 前面的面 */
.front {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  z-index: 2;
}

/* 后面的面 */
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  z-index: 1;
}

perspective：用于设置 3D 视角，本例中我们设置成 1000px。
transform-style：用于设置元素子节点的 3D 空间，我们设置成 preserve-3d，保持子元素在 3D 空间中的位置不变。
transition：用于设置容器翻转时的过渡效果。
backface-visibility：用于控制元素的背面是否可见。我们需要将其设置为 hidden 以实现翻转效果。
transform：用于旋转元素，我们使用 rotateY(180deg) 实现元素的翻转。

JS 控制

通过 JavaScript 控制，我们可以根据用户的操作来触发按钮的翻转效果。根据旋转轴的不同，可以实现不同的翻转效果，如上下、左右或自定义轴的翻转。这里以左右为例，给按钮添加事件监听器。

document.querySelector('.flip-container').addEventListener('click', function () {
  this.querySelector('.flipper').classList.toggle('hover');
});

click 事件：当用户点击容器时触发。
classList.toggle()：动态添加或删除类名 hover，实现元素的翻转。

完整代码

完整的 HTML 和 CSS 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3D flip button</title>
  <style>
    /* 容器 */
    .flip-container {
      perspective: 1000px;
      width: 200px;
      height:200px;
    }

    /* 翻转元素 */
    .flipper {
      position: relative;
      width: 100%;
      height:100%;
      transform-style: preserve-3d;
      transition: transform 0.5s ease-in-out;
    }

    /* 前面的面 */
    .front {
      position: absolute;
      width: 100%;
      height:100%;
      backface-visibility: hidden;
      z-index: 2;
    }

    /* 后面的面 */
    .back {
      position: absolute;
      width: 100%;
      height:100%;
      transform: rotateY(180deg);
      backface-visibility: hidden;
      z-index: 1;
    }

    /* 翻转样式 */
    .flip-container .flipper.hover {
      transform: rotateY(180deg);
    }
  </style>
</head>
<body>
  <div class="flip-container">
    <div class="flipper">
      <div class="front">
        <!-- 前面的内容-->
        <button>前面</button>
      </div>
      <div class="back">
        <!-- 后面的内容-->
        <button>后面</button>
      </div>
    </div>
  </div>

  <script>
    document.querySelector('.flip-container').addEventListener('click', function () {
      this.querySelector('.flipper').classList.toggle('hover');
    });
  </script>
</body>
</html>

以上就是使用 HTML 和 CSS 创建 3D 翻转按钮的全部内容。你可以试着改变元素的位置、颜色或者添加更多内容来让按钮更加酷炫。