مولد تحويل CSS

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

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

يحدد المنظور المسافة بين المشاهد ومستوى Z، مما يخلق وهم العمق للتحويلات ثلاثية الأبعاد. تخلق قيمة أصغر مثل 200 بكسل منظورًا مقربًا للغاية حيث تبدو التأثيرات ثلاثية الأبعاد درامية ومشوهة. تخلق قيمة أكبر مثل 2000 بكسل منظورًا دقيقًا وبعيدًا. يمكن تعيين المنظور على العنصر الأصل كخاصية (perspective: 800px) أو على العنصر نفسه كدالة تحويل (transform: perspective(800px)). يُفضل استخدام طريقة العنصر الأصل عند مشاركة عناصر فرعية متعددة نفس المساحة ثلاثية الأبعاد.

في عام 2026، نادرًا ما تكون بادئات البائع لتحويلات CSS مطلوبة. يتم دعم خاصية التحويل غير المسبوقة في جميع المتصفحات الحديثة بما في ذلك Chrome و Firefox و Safari و Edge والمتصفحات المحمولة. كانت البادئة -webkit-transform مطلوبة لإصدارات Safari و iOS القديمة قبل Safari 9 (2015). إذا كنت بحاجة إلى دعم المتصفحات القديمة جدًا، يمكن لهذا المنشئ تضمين بادئات البائع كتعليق في المخرجات. بالنسبة لمعظم المشاريع التي تستهدف المتصفحات الحالية، فإن الإصدار غير المسبوق كافٍ والكود أنظف بدون بادئات.