مولد تحويل CSS3: القياس والتدوير والترجمة والانحراف

CSS3.0 Transform

مولد تحويل CSS للأشخاص الكسالى.

اضبط المقياس ، وقم بالتدوير ، والترجمة ، والانحراف ، وشاهد المعاينة المباشرة للحصول على العرض المطلوب.

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

 

مقياس وتدوير وترجمة وانحراف

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

 

قم بتدوير العنصر في اتجاه عقارب الساعة باستخدام الخاصية الثانية التي يتم ضبطها بالدرجات. يؤدي الاستدارة بزاوية 180 درجة إلى وضع الكائن رأسًا على عقب بينما تعود الزاوية بزاوية 360 درجة إلى وضعها الرأسي الأصلي. عيّن أي قيمة موجبة أو سالبة أو حتى كسور عشرية.

 

تنقل الترجمة العنصر بوحدات البكسل المتعلقة بموضعه الأصلي. قيمة X أفقيًا بينما Y عموديًا عند وجود سمة استدارة تساوي صفرًا.

 

قم بإمالة الكائنات على محورها الأفقي (X) أو الرأسي (Y).

 

شرح تحويل CSS 

تتيح لك خاصية التحويل CSS تدوير عنصر وقياسه وإمالته وترجمته. يعدل مساحة إحداثيات نموذج التنسيق المرئي CSS.

التعريف والاستخدام

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

دعم المتصفح

تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.

الأرقام متبوعة بـ -webkit- أو -moz- أو -o- تحدد الإصدار الأول الذي يعمل مع بادئة.

بناء الجملة
transform: none|transform-functions|initial|inherit;