Nasıl oluşturulur: 3D döndürme kutusu

CSS ile döndürme kutusu oluşturma nasıl yapılır öğrenin.

Bir döndürme kutusu nasıl oluşturulur

Adım 1 - HTML Ekleme:

<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>Arka Yüz</h2>
    </div>
  </div>
</div>

İkinci Adım - CSS Ekle:

/* Kapa盒容器 - İstediğiniz genişlik ve yüksekliği belirleyin. Sınır özelliğini, fare işaretçisinin üzerine gelindiğinde kapağın盒beyondu (3D etkisi istemiyorsanız perspective'i silin) için gösterdik */
.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* 3D etkisi gerekmiyorsa bu satırı kaldırın */
}
/* Bu konteyner,正面和背面的定位 için kullanılır */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
/* Fare işaretçisi, döndürme kutusu konteynerine taşındığında, yatay döndürme yapılır */
.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;
}
/* Ark面的样式设置 */
.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

Kişisel olarak deneyin

Dikey döndürme

Yatay yerine dikey döndürmek için kullanın rotateX yöntemi,而不是 rotateY：

Örnek

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

Kişisel olarak deneyin

Dikkat:Bu örnekler tablet bilgisayar ve/veya telefonlarda normal çalışmayabilir.

Related pages

Tutorial:CSS 2D transformation

Tutorial:CSS 3D transformation