کیسے بنایا جاتا ہے: 3D فلیپ بیکس

CSS کا استعمال سے فلیپ بیکس بنانے کا تعلیم

کیسے ایک فلیپ باکس بنایا جاتا ہے

پہلے قدم - ایچ تی ام اچ کا اضافہ:

<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>

دوسرا قدم - سی ایس ایس اضافہ کریں:

/* کپ کا کانٹینر - اپنی چاہئیں کی چوڑائی اورعلائق کا قائم رکھنا۔ ہم نے بوردر کی خاصیت کا استعمال کیا ہے تاکہ دکھایا جائے کہ جب موس کا نقشہ کپ کا کانٹینر پر نکل جائے تو کپ کا تازگی کا اثر کانٹینر سے باہر نکل جائے گا ( اگر آپ 3D اثر نہیں چاہئیں تو perspective کو حذف کریں) */
.flip-box {
  پس منظر رنگ: شفاف;
  چوڑائی: 300 پیکسل;
  علائق: 200 پیکسل;
  بوردر: 1 پیکسل سولڈ #f1f1f1;
  پرسپیکٹیو: 1000 پیکسل; /* اگر 3D اثر نہیں چاہئیں تو اس سطر کو ہٹا دیں */
}
/* اس کانٹینر کو پس منظر اور اور کی مقیاس کے لئے استعمال کیا جاتا ہے */
.flip-box-inner {
  پوزیشن: مربوط;
  چوڑائی: 100%;
  علائق: 100%;
  تکست علیحدگی: مرکزی؛
  ترنسمفارم کی تبدیلی 0.8 سیکنڈ میں;
  ترنسمفارم اسٹائل: قائم رکھنا 3d;
}
/* موس کی نقل و حرکت کے دوران، افقی تازگی کا استعمال کریں */
.flip-box:hover .flip-box-inner {
  ترنسمفارم: راتائی ایکسی (180 ڈیگر);
}
/* پس منظر اور اور کی مقیاس */
.flip-box-front, .flip-box-back {
  پوزیشن: قطعی;
  چوڑائی: 100%;
  علائق: 100%;
  -webkit-backface-visibility: خفی; /* سافاری */
  بیکفیس ویزیبلٹی: خفی؛
}
/* پس منظر کی طرز کا قائم رکھنا */
.flip-box-front {
  پس منظر رنگ: #bbb;
  رنگ: سوراج؛
}
/* پس منظر کی طرز کا قائم رکھنا */
.flip-box-back {
  پس منظر رنگ: ڈودر بلو;
  رنگ: وہی؛
  ترنسمفارم: راتائی ایکسی (180 ڈیگر);
}

ذاتی طور پر کوشش کریں

عمودی تازگی

طریق، افقی تازگی کی بجائی عمودی تازگی کا استعمال کریں، راتائی ایکسی طریق، بجائی راتائی:

مثال

.flip-box:hover .flip-box-inner {
  ترنسمفارم: راتائی ایکسی (180 ڈیگر);
}
.flip-box-back {
  ترنسمفارم: راتائی ایکسی (180 ڈیگر);
}

ذاتی طور پر کوشش کریں

توجہ:یہ مثال تبلٹ اور یا تو موبائل پر عادی طور پر چلنے کے لئے نہیں ممکن ہو سکتے ہیں。

صفحات مرتبط

آموزش:تغییرات 2D CSS

آموزش:تغییرات 3D CSS