3D 翻转框

---

了解如何使用 CSS 创建翻转框。

---

翻转框

将鼠标移到下面的方框上以查看效果:

水平翻转:

正面

背面

亲自试一试 »

垂直翻转:

正面

背面

 

亲自试一试 »

---

如何创建翻转框

步骤 1) 添加 HTML:

实例

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <h2>Front Side</h2>
    </div>
    <div class="flip-box-back">
      <h2>Back Side</h2>
    </div>
  </div>
</div>

---

---

步骤 2) 添加 CSS:

实例

/* 翻盖箱容器 - 将宽度和高度设置为您想要的任何值。 我们添加了边框属性来演示翻转本身在悬停时会开箱即用（如果您不想要 3D 效果，请删除透视图 */
.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* 如果您不想要 3D 效果，请将其删除 */
}

/* 需要这个容器来定位正面和背面 */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* 将鼠标移到翻转框容器上时进行水平翻转 */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

/* 定位正面和背面 */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* 正面样式 */
.flip-box-front {
  background-color: #bbb;
  color: black;
}

/* 背面样式 */
.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
} 亲自试一试 »

---

垂直翻转

要进行垂直翻转而不是水平翻转，请使用 rotateX 方法而不是 rotateY:

实例

.flip-box:hover .flip-box-inner {
  transform: rotateX(180deg);
}

.flip-box-back {
  transform: rotateX(180deg);
} 亲自试一试 »

注释:这些示例无法在平板电脑和/或手机上正常运行。

提示:转到我们的 CSS 2D 变换教程，了解有关 2D 变换的更多信息，例如 rotate() 方法。

提示:转到我们的CSS 3D 变换教程，了解有关 3D 变换的更多信息。