چگونه تصویر را مورب کنید

چگونه تصویر را مورب کنید

<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>Paris</h2>
      <p>What an amazing city</p>
    </div>
  </div>
</div>

گام دوم - CSS اضافه کنید:

/* کیسه چرخش - می‌توانید عرض و ارتفاع را به هر مقدار دلخواه تنظیم کنید. ما ویژگی حاشیه را اضافه کرده‌ایم تا نشان دهیم که زمانی که ما موس را روی کیسه چرخش قرار می‌دهیم، چرخش خود به بیرون از کیسه حرکت می‌کند (اگر نمی‌خواهید اثر 3D داشته باشید، اثر دید سه‌بعدی را حذف کنید). */
.flip-box {
  background-color: transparent；
  width: 300px；
  height: 200px；
  border: 1px solid #f1f1f1；
  perspective: 1000px; /* اگر نمی‌خواهید اثر 3D داشته باشید، این را حذف کنید */
}
/* این کانتینر برای قرارگیری جلو و پشت استفاده می‌شود */
.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 {
  ترنسمف: چرخش ی (180 درجه);
}
/* قرارگیری جلو و پشت*/
.flip-box-front, .flip-box-back {
  position: absolute；
  width: 100%；
  height: 100%；
  -webkit-backface-visibility: hidden; /* سافاری */
  backface-visibility: hidden；
}
/* تنظیم سبک جلو (در صورت فقدان تصویر به عنوان پشتیبان استفاده می‌شود) */
.flip-box-front {
  رنگ پس‌زمینه: #bbb；
  رنگ: بلک؛
}
/* طراحی سبک پشت*/
.flip-box-back {
  رنگ پس‌زمینه: dodgerblue；
  رنگ: ویت؛
  ترنسمف: چرخش ی (180 درجه);
}

}