16
تشکر

آموزش پشت و رو کردن 3D یک عنصر با Transform

CSS3

CSS3

شاید در بعضی از سایت ها دیده باشید که با کلیک روی یک عنصر, آن عنصر پشت و رو میشود و طرف دیگر آن به شکل زیبایی نمایش داده میشود. اینکار با استفاده از CSS3 و خاصیت Transform انجام میشود. در ادامه با ما همراه باشید…

برای درک بهتر ابتدا نتیجه کار را در انتهای مطلب ببینید.

ابتدا کدهای HTML زیر را در صفحه قرار میدهیم:

<article class="wrap">
  <div class="card front">
    <img src="front.png" />
  </div>
  <div class="card back">
    <img src="back.png" />
  </div>
</article>

سپس به تگ wrap استایل زیر را میدهیم:

.wrap{
  position: relative;
  width: 300px;
  height: 380px;
  
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

در مورد خاصیت relative و absolute میتوانید در اینجا بخوانید.

خاصیت transform-style مشخص میکند که انیمیشنی که قرار است اجرا شود باید به صورت 3D انجام شود. و همچنین بدون خاصیت transition انیمیشنی وجود ندارد. این خاصیت کدهای ما را به انیمیشن تبدیل میکند.

سپس به عناصر card استایل زیر را میدهیم:

.card{
  position: absolute;
  
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden; 
  backface-visibility: hidden;  
}

خاصیت backface-visibility باعث میشود عناصر پشت عنصر مورد نظر دیده نشود. برای درک بهتر میتوانید پس از تمام شدن این آموزش این سه خط را کامنت کنید و نیتیجه را ببینید.

حالا چون هر دو دایو ما با کلاس card دارای خصوصیت absoluate هستند باید بوسیله index مشخص کنیم که کدام دایو بالاتر قرار بگیرد. خب مسلما دایو front

.front{
  z-index: 1;
}

خب حالا دایو back ما دقیقا پشت front قرار دارد. اما اگر ما دایو wrap را 180 درجه بچرخانیم دایو back نمایش داده نمیشود. بنابراین باید این دایو را 180 درجه بچرخانیم. مانند اینکه بخواهیم دو آدم را پشت به پشت یکدیگر قرار دهیم, آنگاه, ما هر چه قدر آن ها را بچرخانیم باز هم صورت یکی از آنها روبروی ماست.

.back{
  -webkit-transform: rotateY(180deg);  
  -moz-transform: rotateY(180deg);  
  transform: rotateY(180deg);  
}

کار تمام شده است. فقط یک کار دیگر باید انجام شود. آن هم اینکه زمانی که روی عکس کلیک شد باید دایو wrap , 180 درجه بچرخد تا دایو back جلو بیاید. برای اینکار با استفاده از jQuery کلاس زیر را به آن اضافه میکنیم.

.rotate-3d{
  -webkit-transform: rotateY(180deg);  
  -moz-transform: rotateY(180deg);  
  transform: rotateY(180deg);  
}
<script type="text/javascript">
  $(document).ready(function(){
    $('.wrap').on("click", function(){
      $(this).toggleClass('rotate-3d');
    })
  })
</script>

در اضافه کردن کتابخانه jQuery فراموش نکرده باشید.

نتیجه کار:

  • مطلب خوبی هست . ولی به جای javascript میشه با hover css نوشت

  • ff می‌گه:

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;

  • بهرام می‌گه:

    سلام
    از پشت رو کردن عکس یک سوال داشتم که دقیقا کدهای http://jsfiddle.net/Am9P8/ را کپی میکنم اما کار نمیکنه
    فایلم رو براتون ایمیل کردم
    راهنمایی کنید ممنون می شوم .

    • سهیل می‌گه:

      باید از سمت چپ بالای صفحه کتابخانه ی jqurey رو فراخونی کنید اگه نیاز به جی کوئری دارید

  • نسرین می‌گه:

    بله – دانلود کردم و در صفحه ام بازشون می کنم

  • نسرین می‌گه:

    سلام
    شرمنده مجدد مزاحمتون شدم

    من برای کاری که میخواهم انجام دهم دقیقا کدهایی که در آدرس http://jsfiddle.net/drewgreenwell/WdCZS/light/ هست را در سر جاهای مشخص شده اش قرار می دهم اما کار نمی کند و فقط یک عکس ثابت بهم نشان می دهد
    مزاحم شدم که در صورت امکان لطف بفرمائید و راهنمایی کنید .
    شرمنده – ممنون

  • سحر می‌گه:

    سلام
    خیلی مطبی که گذاشتید خوب و مفیده ، کلی تو فکرش بودم که چطوری میشه انجام داد
    یک سوال دارم اگه این سایت رو ببینین http://metro-webdesign.info/
    یک مستطیل نارنجی که روش نوشته شده typoraphiy را نگاه کنید ، عکس این حالت براش اتفاق می افته و چرخش داره و یک سایه سفید رنگ هم دور کادر میزنه

    میشه بگین باید چطوری کار کنم ؟

    مرسی

    • محسن شفیعی می‌گه:

      لینکی که شما معرفی کردید، دقیقا مشابه همین پست است. فقط از مشخصه perspective برای ایجاد حالت سه بعدی استفاده کرده.
      اون سایه سفید رنگ هم با استفاده از box-shadow ایجاد شده است.

  • نسرین می‌گه:

    یک سوال دیگه اینکه اگه نخواهم با کلیلک باشه میخوام با hover باشه ، چطور میشه این کار رو انجام داد ؟
    مرسی

  • نسرین می‌گه:

    سلام
    لطف کنید بفرمائید کدام نسخه و چطوری کتابخانه jquery را باید اضافه کرد ؟

  • وحید مهری می‌گه:

    بسیار عالی بود.
    لطف کنید توضیحات مبسوط به آدرس ایمیلم ارسال نمائید.

  • ali abdollahzade می‌گه:

    جالب بود!


  • نظرات این مطلب بسته است.