چگونه تصویر را چرخش دهیم

چگونه تصویر را چرخش دهیم

<style>
img:hover {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
</style>
<img src="paris.jpg" alt="Paris">

}

توجه:این مثال برای تبلت‌ها یا تلفن‌های همراه مناسب نیست.

نکته:لطفاً وب‌سایت ما را بازدید کنید آموزش تبدیل‌های 3D CSS، برای اطلاعات بیشتری در مورد تبدیل‌های 3D مراجعه کنید.

تصاویر چرخش 3D با متن

آموزش نحوه ایجاد انیمیشن چرخش 3D برای تصاویر با متن:

شنزن

چه شهر شگفت‌انگیزی

قدم اول - اضافه کردن HTML:

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <img src="img_paris.jpg" alt="Paris" style="width:300px;height:200px">
    </div>
    <div class="flip-box-back">
      <h2>پاریس</h2>
      <p>شهر شگفت‌انگیزی است</p>
    </div>
  </div>
</div>

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

/* جعبه چرخان - می‌توانید عرض و ارتفاع را به هر مقدار دلخواه تنظیم کنید. ما به آن ویژگی حاشیه اضافه کرده‌ایم تا نشان دهیم که هنگام قرارگیری ماوس در حالت حالت انتظار، چرخش خود به خارج از جعبه می‌رود (اگر نمی‌خواهید تأثیر سه‌بعدی داشته باشد، تأثیر دیدنی را حذف کنید). */
.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 {
  ترasnفورم: روتاته ی (180درجه);
}
/* قرارگیری جلو و پشت */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}
/* تنظیم سبک جلو (در صورت فقدان تصویر به عنوان بازگشت استفاده می‌شود) */
.flip-box-front {
  رنگ پس‌زمینه: #bbb;
  رنگ: سیاه;
}
/* طراحی سبک پشت*/
.flip-box-back {
  رنگ پس‌زمینه: dodgerblue;
  رنگ: سفید;
  ترasnفورم: روتاته ی (180درجه);
}

}