مولد التحويلات
إنشاء ومعاينة خصائص تحويل CSS بصريًا.
CSS Transform هي خاصية CSS قوية تسمح لك بتحويل عناصر الويب في مساحة ثنائية أو ثلاثية الأبعاد. من خلال التحويلات مثل translate و rotate و scale و skew، يمكنك إنشاء تصاميم ويب ديناميكية وتفاعلية. قم بإنشاء التأثيرات المطلوبة بسهولة مع معاينة في الوقت الفعلي.
transform: none;دوال التحويل
- • translate(x, y): translate(x, y): تحريك العنصر بمقدار x, y
- • scale(x, y): scale(x, y): تحجيم العنصر بنسبة x, y
- • rotate(angle): rotate(angle): تدوير العنصر بزاوية
- • skew(x, y): skew(x, y): انحراف العنصر بدرجات x, y
نصائح الاستخدام
- • يمكن دمج دوال تحويل متعددة بمسافات
- • تغيير نقطة الأصل للتحويل باستخدام transform-origin
- • استخدم مع الانتقال لإنشاء تأثيرات الرسوم المتحركة
- • استخدم خاصية perspective للتحويلات ثلاثية الأبعاد
🎯 مفاهيم التحويل الأساسية
CSS Transform هي خاصية CSS تغير شكل وحجم وموضع العناصر. تسمح بالتحويل البصري للعناصر دون تعطيل تدفق المستند العادي.
الصيغة الأساسية:
transform: function(value) function(value) ...;📐 تفاصيل دالة التحويل
🔄 Translate (الحركة)
- •
translate(x, y): translate(x, y): التحرك على طول المحورين X, Y - •
translateX(x): translateX(x): التحرك على طول المحور X فقط - •
translateY(y): translateY(y): التحرك على طول المحور Y فقط - •
translate3d(x, y, z): translate3d(x, y, z): حركة ثلاثية الأبعاد
transform: translate(50px, 100px);📏 Scale (تغيير الحجم)
- •
scale(x, y): scale(x, y): تحجيم المحورين X, Y - •
scaleX(x): scaleX(x): تحجيم المحور X فقط - •
scaleY(y): scaleY(y): تحجيم المحور Y فقط - • أكبر من 1 يكبر، أقل من 1 يصغر
transform: scale(1.5, 0.8);🔄 Rotate (الدوران)
- •
rotate(angle): rotate(angle): الدوران حول المحور Z - •
rotateX(angle): rotateX(angle): الدوران حول المحور X - •
rotateY(angle): rotateY(angle): الدوران حول المحور Y - • استخدم وحدات deg, rad, turn للزوايا
transform: rotate(45deg);📐 Skew (الانحراف)
- •
skew(x, y): skew(x, y): الانحراف على طول المحورين X, Y - •
skewX(angle): skewX(angle): الانحراف على طول المحور X - •
skewY(angle): skewY(angle): الانحراف على طول المحور Y - • التحويل إلى شكل متوازي الأضلاع
transform: skew(15deg, 5deg);🎨 Transform Origin (نقطة التحويل)
تحدد خاصية transform-origin نقطة الأصل للتحويل. الافتراضي هو مركز العنصر (50% 50%).
استخدام الكلمات المفتاحية
transform-origin: top left;استخدام النسب المئوية
transform-origin: 25% 75%;استخدام البكسل
transform-origin: 10px 20px;⚡ نصائح لتحسين الأداء
✅ توصيات
- • تحريك التحويل والشفافية فقط
- • استخدام خاصية will-change
- • استخدام تسريع GPU (translateZ(0))
- • إنشاء طبقات مركبة لأداء أفضل
❌ أشياء يجب تجنبها
- • تحريك العرض، الارتفاع
- • تحريك المواضع اليسرى، العلوية
- • تداخل التحويلات المفرط
- • استخدام will-change غير الضروري
مثال على تحسين الأداء:
.optimized {
will-change: transform;
transform: translateZ(0); /* 3D 가속 */
transition: transform 0.3s ease;
}🎬 الرسوم المتحركة والانتقالات
يمكن استخدام التحويل مع CSS Transition و Animation لإنشاء تأثيرات سلسة.
مثال على الانتقال
.hover-effect {
transition: transform 0.3s ease;
}
.hover-effect:hover {
transform: scale(1.1) rotate(5deg);
}مثال على الرسوم المتحركة بالإطارات الرئيسية
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.bounce { animation: bounce 1s infinite; }🌐 توافق المتصفح
يتم دعم CSS Transform في جميع المتصفحات الحديثة، ولكن قد تكون هناك حاجة إلى بادئات البائع للمتصفحات القديمة.
مثال على بادئة البائع:
-webkit-transform: rotate(45deg); /* Safari, Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-ms-transform: rotate(45deg); /* IE 9 */
transform: rotate(45deg); /* 표준 */🎯 أمثلة على الاستخدام في العالم الحقيقي
تأثير تحويم البطاقة
.card {
transition: transform 0.3s ease;
cursor: pointer;
}
.card:hover {
transform: translateY(-10px) scale(1.02);
}مؤشر التحميل
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner {
animation: spin 1s linear infinite;
}تأثير دخول النافذة المنبثقة
.modal {
transform: scale(0) rotate(180deg);
transition: transform 0.3s ease;
}
.modal.show {
transform: scale(1) rotate(0deg);
}تأثير النقر على الزر
.button {
transition: transform 0.1s ease;
}
.button:active {
transform: scale(0.95);
}🔧 أدوات تصحيح الأخطاء والتطوير
أدوات مطور المتصفح
- • التحرير في الوقت الفعلي في لوحة العناصر
- • التحقق من القيم النهائية في علامة التبويب المحسوبة
- • تحليل الأداء باستخدام علامة التبويب الأداء
- • التحقق من بنية الطبقة باستخدام العرض ثلاثي الأبعاد
خصائص CSS مفيدة
- •
transform-style: preserve-3d - •
perspective: 1000px - •
backface-visibility: hidden - •
will-change: transform
💡 نصائح احترافية
نصيحة الأداء
يمكن أن يؤدي استخدام transform3d() أو translateZ(0) لإنشاء طبقات مركبة لتسريع GPU إلى تحسين أداء الرسوم المتحركة بشكل كبير.
نصيحة إمكانية الوصول
استخدم استعلام الوسائط prefers-reduced-motion لتوفير بدائل للمستخدمين الحساسين للحركة.
نصيحة التصميم
يمكن أن يؤدي تعيين transform-origin بشكل صحيح إلى إنشاء تأثيرات تحويل أكثر طبيعية.
نصيحة التطوير
يؤدي استخدام متغيرات CSS للتحكم ديناميكيًا في قيم التحويل إلى تسهيل تكامل JavaScript.