كيفية تدوير الصور

كيفية تدوير الصور

<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="باريس" style="عرض:300بكسل;ارتفاع:200بكسل">
    </div>
    <div class="flip-box-back">
      <h2>باريس</h2>
      <p>ما مدى روعة هذا المدينة</p>
    </div>
  </div>
</div>

الخطوة الثانية - إضافة CSS:

/* وعاء صندوق التحويل - يمكنك تعيين العرض والارتفاع إلى أي قيمة. لقد أضفنا خاصية الحاجز لعرض أن تحويل الصندوق سيخرج من الوعاء عند التمرير فوقه بالفأرة (إذا كنت لا تريد تأثير ثلاثي الأبعاد يمكنك إزالة تأثير النظرية). */
.flip-box {
  لون الخلفية: شفاف;
  العرض: 300 بكسل;
  الارتفاع: 200 بكسل;
  الحاجز: 1 بكسل خطي #f1f1f1;
  النظرية: 1000 بكسل; /* إذا كنت لا تريد تأثير ثلاثي الأبعاد، قم بإزالة هذا الخيار */
}
/* هذا الماكينة يستخدم لتحديد الموقع للجانب الأمامي والخلفي */
.flip-box-inner {
  الموقع: نسبي;
  العرض: 100%;
  الارتفاع: 100%;
  تنسيق النص: منتصف;
  انتقال: تحويل 0.8 ثانية;
  نمط التحويل: الحفاظ على الثلاثي الأبعاد;
}
/* عند تحريك الفأرة على وعاء صندوق التحويل، يتم تحويله أفقياً */
.flip-box:hover .flip-box-inner {
  تحويل: دورة الأفقية 180 درجة;
}
/* تحديد الموقع للجانب الأمامي والخلفي */
.flip-box-front, .flip-box-back {
  الموقع: مطلق;
  العرض: 100%;
  الارتفاع: 100%;
  -webkit-ظهور الوجه الخلفي: مخفي; /* Safari */
  ظهور الوجه الخلفي: مخفي;
}
/* إعداد النمط للجانب الأمامي (إذا كانت الصورة مفقودة فستستخدم إجراء التبديل) */
.flip-box-front {
  لون الخلفية: #bbb;
  لون: أسود;
}
/* تصميم النمط للجانب الخلفي */
.flip-box-back {
  لون الخلفية: dodgerblue;
  لون: أبيض;
  تحويل: دورة الأفقية 180 درجة;
}

تجربة بنفسك