如何创建：3D 翻转盒子

学习如何使用 CSS 创建一个翻转盒子。

如何创建一个翻转盒子

第一步 - 添加 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>Lateral Side</h2>
    </div>
  </div>
</div>

Ikalawa - Magdagdag ng CSS:

/* Container ng pagflip - itaas ang iyong hiniling na lapad at taas. Nagdagdag kami ng border attribute para sa pagpapaalamin, kapag may hover, ang pagflip ay lumalabas sa kahon (kung hindi mo nais ang 3D epekto, alisin ang perspective) */
.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Kung hindi mo nais ang 3D epekto, ilipat ang linya na ito */
}
/* Ang container na ito ay ginamit para sa lokasyon ng unahan at likod */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
/* Paglapit ng mouse sa container ng pagflip, gumawa ng horizontal flip */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}
/* Lokasyon ng unahan at likod */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}
/* Itago ang estilo ng unahan */
.flip-box-front {
  background-color: #bbb;
  color: black;
}
/* Itago ang estilo ng likod */
.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

Subukan nang personal.

pagpalit sa pader

para sa pagpalit sa pagpalit sa pahaba kaysa sa pagpalit sa pader, gamitin ang rotateX para sa paggamit ng rotateY:

Sample

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

Subukan nang personal.

Babala:Mga halimbawa ay maaaring hindi gumana nang maayos sa tablet computer at/o smartphone.

相关页面

教程：CSS 2D 变换

教程：CSS 3D 变换