مولد تحويل CSS

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

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

كل شيء يحدث في متصفحك. ابدأ من إعداد مسبق مثل Grow أو Rotate أو Flip أو 3D Card، وقم بضبط كل وظيفة ونسخ الإعلان. تكتب الأداة فقط الوظائف التي قمت بتغييرها بالفعل، لذلك لا تقوم أبدًا بشحن مقياس متكرر (1) أو تدوير (0deg). لا يوجد حساب ولا تحميلات، ويستمر في العمل دون اتصال بالإنترنت بمجرد تحميل الصفحة.

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