ما هي أفضل طريقة لاستخدام التحويل في CSS؟

في هذه المقالة سوف نفهم Transform In بالتفصيل ومتابعته مع شرح عملي مفصل. سيتم تغطية المؤشرات التالية في هذه المقالة ،

كيفية استخدام سبايدر بيثون

• ما هو تحويل CSS؟
• ما هي خصائص التحويل المختلفة؟

مع التقدم في وظائف موقع الويب ، من المهم بنفس القدر توفير عمليات تكامل ذكية على موقع الويب الخاص بك لجعله جذابًا وأفضل. إن إضافة عناصر CSS المختلفة التي تكمل موقعك هي حاجة الساعة.
يبتعد الناس عن مواقع الويب التي لا تجذب الجماهير حقًا. لذا ، ماذا عن محاولة تحويل بعض العناصر وتجميل CSS بقيمة ضغط أقل.
لتلبية الاحتياجات المماثلة ، قمنا بتحويل خاصية CSS التي تحول العناصر إما عن طريق الانحراف أو التدوير أو القياس أو الترجمة.

المضي قدمًا في هذه المقالة حول Transform In CSS

ما هو تحويل CSS؟

يعني تحويل عنصر CSS توفير ميزة له في شكل ثنائي الأبعاد أو ثلاثي الأبعاد. بصريا يغير تصميم عنصر.
يعمل التحويل ثنائي الأبعاد على محوري X و Y. يمكنك توفير أي حافة أو هيكل على كلا المحورين لإجراء تغييرات. أثناء إجراء التحويل ثلاثي الأبعاد ، يجب العمل على محاور X و Y بالإضافة إلى Z لتوفير العمق المطلوب.

خصائص تحويل CSS 2D:

خصائص تحويل CSS 3D:

فمثلا:

عنصر css {width: 20px height: 20px transform: scale (20)}

الآن ، عندما تفعل ذلك ، سيتم تحجيم العنصر المحدد بمقدار 20 مرة.

ليس هذا فقط ، يمكنك أيضًا قياس المحور للقياس الأفقي والقياس الرأسي.

تحويل: scaleX (2) تحويل: scaleY (.5)

لتوفير تحول مناسب عبر جميع المتصفحات ، يمكنك:

div {-webkit-transform: scale (1.5) -moz-transform: scale (1.5) -o-transform: scale (1.5) transform: scale (1.5)}

تعمل خاصية التحويل CSS على تحسين مساحة الإحداثيات لمستوى التنسيق المرئي لـ CSS.
ما هو مستوى التنسيق المرئي؟
يعني مستوى التنسيق المرئي معالجة مستند وتقديمه بشكل مرئي على منصات الوسائط. باستخدام التنسيق المرئي ، يمكنك تحويل كل عنصر كنموذج يتوافق مع نموذج مربع CSS. يعرّف نموذج مربع CSS عنصرًا بتنسيق مربع مستطيل قياسي يحدد الحجم والموضع والخصائص.
ملحوظة: يمكن فقط تحويل العناصر القابلة للتحويل.

المضي قدمًا في هذه المقالة حول Transform In CSS

ما هي خصائص التحويل المختلفة؟

دعونا نلقي نظرة على جميع خصائص التحويل:

1. مقياس (): القياس يعني تغيير حجم العنصر أفقيًا أو رأسيًا.

للقياس الرأسي:مقياس X

للقياس الأفقي:مقياس ص

بالنسبة للعنصر ، يمكنك أيضًا تغيير حجم الخط أو المساحة المتروكة أو الارتفاع أو العرض. القيمة الافتراضية هي 1 مما يعني أيضًا توفير 0.5 حيث أن القيمة تقسمها إلى النصف مع توفير 2 يضاعف القياس.

2. الانحراف (): تتيح خاصية Skew للمستخدم إمالة عنصر إلى اليمين أو اليسار من نقطة إحداثية واحدة. إنه يشبه تحويل مستطيل إلى متوازي أضلاع. يمكنك انحراف عنصر بإحداثياته.

مثال:

.element {transform: skewX (25deg)} .element {transform: skewY (25deg)

عند القيام بذلك ، ينحرف العنصر بمقدار 25 درجة أفقيًا وعموديًا باستخدام skewX أو skewY.

3. تدوير ( ) : يمكنك تدوير عنصر في اتجاه عقارب الساعة باستخدام هذه الخاصية. يمكنك تدويره 180 درجة أو 360 درجة لإعادته إلى مكانه الأصلي.

ما هو الفرق بين xml و html

عنصر {تحويل: تدوير (25deg)}

لتوفير الدوران أيضًا ، يمكنك استخدام أي من الأبعاد الثلاثة: rotateX أو rotateY أو rotateZ.

4. ترجم ( ) : يمكنك تحريك عنصر بشكل صحيح مقلوبًا أو جانبيًا.

.element {transform: translate (20px، 10px)}

ستعمل الترجمة على تحريك عنصر / عنصر محدد رأسًا على عقب أو جانبيًا. تقوم القيمة الأولى المحددة بتحريك العنصر الأيمن (السالب سوف يحركه في الجانب الأيسر) والقيمة الثانية تحركه لأسفل (سيؤدي تحديد قيمة سالبة إلى تحريكه لأعلى).

إذا كان هذا قد يربكك ، فقم بتطبيق المحور X لتغيير موضع العنصر أفقيًا ومحاور Y لتغيير الموضع عموديًا. أكثر الجوانب المدهشة حول خاصية التحويل هو أن تطبيق التحويل سيسمح فقط للعنصر بالتحرك ، مع الحفاظ على كل عنصر أو نص آخر كما هو. يتم أخذ المسافة عمومًا بالبكسل أو بالنسب المئوية.

فمثلا:

.element {transform: translateX (value) transform: translateY (value)}

5. المنظور (): يمكنك توفير عمق في منظور العنصر. يسمح بإعطاء تحويل ثلاثي الأبعاد لعنصر من خلال جعله تكعيبيًا في التحويل.
translate3d (x، y، z)
ترجمة Z (ض)

translate3d (x، y، z) translateZ (z)

يعطي إدخال المحور z للعنصر تصورًا ثلاثي الأبعاد. يقوم translateZ () بتحريك العنصر باتجاه العارض بينما تقوم القيمة السالبة بنقله بعيدًا.

6. ماتريكس () : اجمع كل التحويلات في واحد.

استدارة (45 درجة) ترجمة (24 بكسل ، 25 بكسل)

تطبيق matrix () يجمع كل خصائص التحويل في مصفوفة واحدة.

يمكن أن يؤدي تطبيق خصائص التحويل إلى تحسين عنصرك بشكل كبير وبالتالي جاذبية موقع الويب الخاص بك. جربهم!

يقودنا هذا إلى نهاية هذه المقالة حول Transform In CSS.

إذا كنت مهتمًا بمعرفة المزيد حول تطوير الويب ، فاطلع على بواسطة Edureka. سيساعدك تدريب شهادة تطوير الويب على تعلم كيفية إنشاء مواقع ويب رائعة باستخدام HTML5 و CSS3 و Twitter Bootstrap 3 و jQuery و Google APIs ونشرها في Amazon Simple Storage Service (S3).

إذا كنت لا تزال مهتمًا. إذا كان لديك أي سؤال ، فيمكنك نشره في قسم التعليقات في مدونة 'ما المقصود بـ CSS' وسنعاود الاتصال بك في أقرب وقت ممكن.