تدوير الصورة بتنسيق 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.

الصورة الأصلية

<html>

<body>

<"img src="https://www.jabism.com/wp-content/uploads/2019/07/vache.png>

</body>

</html>

</body>

تدوير الصورة 90 درجة

تدوير الصورة بتنسيق HTML

تدوير الصورة 180 درجة

تدوير الصورة 360 درجة

التدوير الحر

القيم التي ذكرنا سابقاً هي الأشهر، ولكن يمكنك تغيير القيم كيفما تريد زهي ما سنرى بعضها في الأمثلة التالية:

rotate(35deg)

تدوير الصورة 35 درجة

rotate(35deg)

تدوير الصورة 135 درجة

rotate(135deg)

هذا مثال شامل لكل الحالات:

<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>

يمكنكم تغيير قيمة الدرجة بما تريدون .. في أمان الله

اعداد:(محمد كمال(Tiger Ping))