چگونه ایجاد می‌شود: جعبه چرخنده سه‌بعدی

آموزش نحوه ایجاد یک جعبه چرخنده با استفاده از 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>طرف پشتی</h2>
    </div>
  </div>
</div>

مرحله دوم - اضافه کردن CSS:

/* قابلیت جعبه - تنظیم عرض و ارتفاع مورد نظر خود را انجام دهید. ما به منظور نمایش، ویژگی border را اضافه کرده‌ایم، که چرخش خود به خارج از جعبه ادامه می‌دهد (اگر از اثر سه‌بعدی استفاده نمی‌کنید، perspective را حذف کنید) */
.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* اگر از اثر سه‌بعدی استفاده نمی‌کنید، این خط را حذف کنید */
}
/* این قالب برای قرارگیری جلویی و پشتی استفاده می‌شود */
.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 تبدیل

آموزش:ترجمه CSS 3D تبدیل