تدوير الصورة بتنسيق HTML
قلت لكم في الكثير من الحصص أنكم ستحبون HTML ، لأنه يُفاجئنا بتأثيراته الباهرة ويُبَسِّطُ لنا تنسيق العناصر حين يتعلق الأمر بإنشاء صفحاتنا على الويب .
اليوم سنتعرف على مزية أخرى من مزايا لغة HTML، إنها الطريقة التقنية لتدوير صورة بتنسيق HTML في صفحات الويب .
لا تنسى قراءة مقال: « إدراج الصور في HTML »
استخدم خاصية transform CSS لتدوير صورة بتنسيق HTML
تتضمن خاصية transform CSS تعديل عنصر معين في الكود الخاص بنا. في حالتنا هذه، سنجري عمليتنا على الصورة لتحويلها وتدويرها. تقوم هذه الخاصية بتطبيق تحويل ثنائي الأبعاد ” 2D ” أو ثلاثي الأبعاد ” 3D ” على عنصر. بالإضافة إلى ذلك ، تمنح هذه الخاصية أيضاً الإذن بالتدوير ، والقياس ، والتحرك ، والانحراف ، وأشياء أخرى. كما أنه يغير مساحة نموذج التنسيق المرئي CSS. و يمكننا ضبط خاصية التحويل على دالة rotate () مع ذكر الوحدة في الوظيفة لتدوير صورة في HTML. يجب وضع قيمة دوران الصورة بين قوسين (). تُستخدم وحدة deg لتحديد قيمة الدوران. كما يمكننا استخدام CSS المضمنة لهذا الغرض. وبالتالي، سيتم استخدام CSS في علامة <img>.
على سبيل المثال ، أدخل صورة عادية مع علامة <img> في HTML. قم بتعيين سمة src على رابط الصورة
https://www.jabism.com/wp-content/uploads/2019/07/vache.png . ولكي يتحقق الدوران 90 درجة ، أدخل الصورة وأضف أنماطاً إليها. في سمة النمط ، أضبط خاصية transform على rotate(90deg). بعد ذلك ، أضف <br> علامة. وبالمثل ، قم بتدوير الصور 180 deg و 360 deg.توضح الأمثلة أدناه طريق تدوير صورة بتنسيق HTML داخل علامة <img> ، مما يعني أنه يمكن تدوير الصورة المدرجة باستخدام خاصية transform:rotate(). كما تلاحظون أننا أدخلنا الصورة الأصلية وقمنا بتدويرها بزاوية 90 و 180 و 360 درجة. يمكننا كتابة قيم الدرجة المطلوبة لوظيفة rotate (). الصورة الثانية في المثال تدور إلى نصف المحور بمعنى 90 درجة. الصورة الثالثة مقلوبة حيث تم تدويرها 180 درجة. عندما يتم تدوير الصورة 360 درجة ، فإنها تبدو مثل الصورة الأصلية لأنها أكملت دورة كاملة وعادت إلى مكانها الأصلي. لذلك يمكننا استخدام الخاصية transform() و القيمة rotate() لتدوير الصورة باستخدام HTML و CSS.
الصورة الأصلية
|
1 2 3 4 5 |
<html> <body> <img src="https://www.jabism.com/wp-content/uploads/2019/07/vache.png"> </html> </body> |
تدوير الصورة 90 درجة
|
1 |
<img src="https://www.jabism.com/wp-content/uploads/2019/07/vache.png" style="transform:rotate(90deg);"> |
تدوير الصورة بتنسيق HTML
تدوير الصورة 180 درجة
|
1 |
<img src="https://www.jabism.com/wp-content/uploads/2019/07/vache.png" style="transform:rotate(180deg);"> |
تدوير الصورة 360 درجة
|
1 |
<img src="https://www.jabism.com/wp-content/uploads/2019/07/vache.png" style="transform:rotate(360deg);"> |
التدوير الحر
القيم التي ذكرنا سابقاً هي الأشهر، ولكن يمكنك تغيير القيم كيفما تريد زهي ما سنرى بعضها في الأمثلة التالية:
تدوير الصورة 35 درجة
rotate(35deg)
تدوير الصورة 135 درجة
rotate(135deg)
هذا مثال شامل لكل الحالات: 
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<html> <body> <img src="<img src="https://www.jabism.com/wp-content/uploads/2019/07/vache.png">" /> <br> الصورة الأصلية <img src="<img src="https://www.jabism.com/wp-content/uploads/2019/07/vache.png">" style="transform:rotate(90deg);"> <br> تدوير الصورة 90 درجة <img src="<img src="https://www.jabism.com/wp-content/uploads/2019/07/vache.png">" style="transform:rotate(180deg);"> <br> تدوير الصورة 180 درجة <img src="<img src="https://www.jabism.com/wp-content/uploads/2019/07/vache.png">" style="transform:rotate(360deg);"> <br> تدوير الصورة 360 درجة <img src="<img src="https://www.jabism.com/wp-content/uploads/2019/07/vache.png">" style="transform:rotate(35deg);"> <br> تدوير الصورة 35 درجة <img src="<img src="https://www.jabism.com/wp-content/uploads/2019/07/vache.png">" style="transform:rotate(135deg);"> <br> تدوير الصورة 135 درجة </body> </html> |
يمكنكم تغيير قيمة الدرجة بما تريدون .. في أمان الله
قناتي على اليوتوب أرى أن هذه المواضيع قد تهمك: |
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.