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

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

 

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

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

 

 

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

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

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

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

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

 

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

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

التدوير الحر

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

rotate(35deg)

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

rotate(35deg)

 

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

 

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

rotate(135deg)

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

 

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

 

قناتي على اليوتوب

أرى أن هذه المواضيع قد تهمك:

 

شَـاركِ الْمَوْضُوع: 
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

حول الكاتب :   من أقصى شمال المغرب كاتب مقالات إلكترونية حول كيفية بناء موقع ويب ناجح : ووردبريس ، HTML ، CSS .ومواضيع مختلفة وناشط على اليوتيوب في قناة: Jabism Web و رحيل الليل
كتب 445 مقالة في jabism.com.
-:- راسلني   -:- تابعني على تويتر   -:- تابعني على الفايسبوك

134 عدد المشاهدات لهذا المحتوى
Scroll to Top