التحويلات والتأثيرات

التحويلات والتأثيرات في Tailwind CSS

تسمح التحويلات بمعالجة العناصر في الفضاء ثنائي وثلاثي الأبعاد من خلال التحجيم والتدوير والإزاحة والانحراف. يوفر Tailwind مجموعة شاملة من أدوات التحويل التي تسهل إنشاء واجهات ديناميكية وتفاعلية دون كتابة CSS مخصص.

تحويلات التحجيم

تحويلات التحجيم تغير حجم العناصر على طول المحاور X وY. يوفر Tailwind أدوات للتحجيم الموحد والتحكم في المحاور الفردية.

<!-- التحجيم الموحد -->
<div class="scale-0">غير مرئي (0%)</div>
<div class="scale-50">نصف الحجم (50%)</div>
<div class="scale-75">75% من الحجم</div>
<div class="scale-90">90% من الحجم</div>
<div class="scale-95">95% من الحجم</div>
<div class="scale-100">الحجم الطبيعي (100%)</div>
<div class="scale-105">105% من الحجم</div>
<div class="scale-110">110% من الحجم</div>
<div class="scale-125">125% من الحجم</div>
<div class="scale-150">150% من الحجم</div>

<!-- تحجيم المحور المستقل -->
<div class="scale-x-50">50% عرض</div>
<div class="scale-y-150">150% ارتفاع</div>
<div class="scale-x-75 scale-y-125">75% عرض، 125% ارتفاع</div>

<!-- زر مع تأثير تحجيم عند التمرير -->
<button class="transform hover:scale-105 transition-transform duration-200
              bg-blue-600 text-white px-6 py-3 rounded-lg">
  مرر فوقي
</button>

<!-- بطاقة صورة مع تكبير عند التمرير -->
<div class="overflow-hidden rounded-lg">
  <img src="image.jpg"
       class="transform hover:scale-110 transition-transform duration-500"
       alt="صورة قابلة للتكبير">
</div>

<!-- أيقونة مع تأثير التحجيم -->
<button class="transform hover:scale-125 active:scale-95
              transition-transform duration-150">
  <svg class="w-6 h-6">...</svg>
</button>

تحويلات التدوير

تحويلات التدوير تدور العناصر حول نقطة أصل التحويل. يوفر Tailwind أدوات تدوير بزيادات 1، 2، 3، 6، 12، 45، 90، و180 درجة.

<!-- التدويرات الموجبة (في اتجاه عقارب الساعة) -->
<div class="rotate-0">بدون تدوير</div>
<div class="rotate-1">درجة واحدة</div>
<div class="rotate-2">درجتان</div>
<div class="rotate-3">3 درجات</div>
<div class="rotate-6">6 درجات</div>
<div class="rotate-12">12 درجة</div>
<div class="rotate-45">45 درجة</div>
<div class="rotate-90">90 درجة</div>
<div class="rotate-180">180 درجة</div>

<!-- التدويرات السالبة (عكس عقارب الساعة) -->
<div class="-rotate-1">-1 درجة</div>
<div class="-rotate-45">-45 درجة</div>
<div class="-rotate-90">-90 درجة</div>

<!-- دوار التحميل -->
<div class="animate-spin rounded-full h-12 w-12 border-4 border-blue-500
            border-t-transparent"></div>

<!-- أيقونة سهم تدور عند الفتح -->
<button class="flex items-center gap-2">
  القائمة
  <svg class="w-5 h-5 transform transition-transform duration-200
              group-open:rotate-180">
    <path d="M19 9l-7 7-7-7" />
  </svg>
</button>

<!-- شارة مع تدوير طفيف -->
<span class="inline-block rotate-3 bg-red-500 text-white px-3 py-1
             rounded-full text-sm font-bold">
  جديد!
</span>

<!-- بطاقة تميل عند التمرير -->
<div class="transform hover:rotate-1 transition-transform duration-200
            bg-white p-6 rounded-lg shadow-lg">
  محتوى البطاقة
</div>

تحويلات الإزاحة

تحويلات الإزاحة تحرك العناصر على طول المحاور X وY دون التأثير على مساحتها الأصلية في تدفق المستند.

<!-- إزاحة المحور X -->
<div class="translate-x-0">بدون حركة</div>
<div class="translate-x-1">تحريك لليمين 0.25rem</div>
<div class="translate-x-4">تحريك لليمين 1rem</div>
<div class="translate-x-1/2">تحريك لليمين 50%</div>
<div class="translate-x-full">تحريك لليمين 100%</div>
<div class="-translate-x-4">تحريك لليسار 1rem</div>
<div class="-translate-x-1/2">تحريك لليسار 50%</div>

<!-- إزاحة المحور Y -->
<div class="translate-y-0">بدون حركة</div>
<div class="translate-y-2">تحريك للأسفل 0.5rem</div>
<div class="translate-y-1/2">تحريك للأسفل 50%</div>
<div class="-translate-y-4">تحريك للأعلى 1rem</div>
<div class="-translate-y-full">تحريك للأعلى 100%</div>

<!-- إزاحة مركبة -->
<div class="translate-x-4 translate-y-4">تحريك لليمين وللأسفل</div>

<!-- تقنية التوسيط المثالي -->
<div class="relative h-screen">
  <div class="absolute top-1/2 left-1/2 transform
              -translate-x-1/2 -translate-y-1/2
              bg-white p-8 rounded-lg shadow-xl">
    محتوى في المركز تماماً
  </div>
</div>

<!-- رسوم متحركة للانزلاق -->
<div class="transform -translate-x-full opacity-0
            transition-all duration-500
            data-[visible=true]:translate-x-0
            data-[visible=true]:opacity-100">
  المحتوى ينزلق من اليسار
</div>

<!-- قائمة منسدلة -->
<div class="relative">
  <button>القائمة</button>
  <div class="absolute top-full mt-2 transform -translate-y-2 opacity-0
              invisible transition-all duration-200
              group-hover:translate-y-0 group-hover:opacity-100
              group-hover:visible">
    <a href="#">العنصر 1</a>
    <a href="#">العنصر 2</a>
  </div>
</div>

تحويلات الانحراف

تحويلات الانحراف تشوه العناصر على طول المحور X أو Y، مما يخلق تأثير مائل أو متوازي الأضلاع.

<!-- انحراف المحور X -->
<div class="skew-x-0">بدون انحراف</div>
<div class="skew-x-1">انحراف درجة واحدة</div>
<div class="skew-x-2">انحراف درجتان</div>
<div class="skew-x-3">انحراف 3 درجات</div>
<div class="skew-x-6">انحراف 6 درجات</div>
<div class="skew-x-12">انحراف 12 درجة</div>
<div class="-skew-x-6">انحراف -6 درجات</div>

<!-- انحراف المحور Y -->
<div class="skew-y-3">انحراف Y 3 درجات</div>
<div class="-skew-y-6">انحراف Y -6 درجات</div>

<!-- انحراف مركب -->
<div class="skew-x-6 skew-y-3">كلا المحورين منحرفان</div>

<!-- زر متوازي الأضلاع -->
<button class="skew-x-12 bg-purple-600 text-white px-8 py-3">
  <span class="-skew-x-12 inline-block">
    زر مائل
  </span>
</button>

<!-- فاصل قسم قطري -->
<div class="relative">
  <div class="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-600
              skew-y-3 transform-gpu"></div>
  <div class="relative z-10 py-20 px-4">
    المحتوى فوق الخلفية المنحرفة
  </div>
</div>

<!-- تأثير انحراف عند التمرير -->
<a href="#" class="block p-6 bg-white rounded-lg shadow-md
                   transform transition-transform duration-200
                   hover:skew-y-1 hover:-skew-x-1">
  بطاقة مع انحراف عند التمرير
</a>

نقطة أصل التحويل

تحدد نقطة أصل التحويل النقطة التي يتم تطبيق التحويلات حولها. بشكل افتراضي، تنشأ التحويلات من مركز العنصر.

<!-- نقاط أصل الزوايا -->
<div class="origin-center">المركز (افتراضي)</div>
<div class="origin-top">أعلى الوسط</div>
<div class="origin-top-right">أعلى اليمين</div>
<div class="origin-right">وسط اليمين</div>
<div class="origin-bottom-right">أسفل اليمين</div>
<div class="origin-bottom">أسفل الوسط</div>
<div class="origin-bottom-left">أسفل اليسار</div>
<div class="origin-left">وسط اليسار</div>
<div class="origin-top-left">أعلى اليسار</div>

<!-- قائمة منسدلة تفتح من الأعلى -->
<div class="origin-top transform scale-0
            group-open:scale-100 transition-transform duration-200">
  محتوى القائمة
</div>

<!-- بطاقة تنقلب من الأسفل -->
<div class="origin-bottom transform rotate-0 hover:rotate-180
            transition-transform duration-500">
  <div class="front">الأمام</div>
  <div class="back">الخلف</div>
</div>

<!-- سهم تلميح يشير بشكل صحيح -->
<div class="relative">
  <div class="tooltip">نص التلميح</div>
  <div class="absolute bottom-full left-1/2 -translate-x-1/2
              w-3 h-3 bg-gray-900 transform rotate-45 origin-center"></div>
</div>

<!-- تأثير المروحة - عدة عناصر تدور من نفس النقطة -->
<div class="relative">
  <button class="origin-bottom-right rotate-0 hover:rotate-15">1</button>
  <button class="origin-bottom-right rotate-0 hover:rotate-30">2</button>
  <button class="origin-bottom-right rotate-0 hover:rotate-45">3</button>
</div>

الجمع بين تحويلات متعددة

يمكنك الجمع بين أدوات تحويل متعددة على عنصر واحد. يتم تطبيق التحويلات بالترتيب: الإزاحة، التدوير، الانحراف، ثم التحجيم.

<!-- تأثير تمرير معقد -->
<button class="transform transition-all duration-300
              hover:scale-110 hover:rotate-3 hover:-translate-y-1
              bg-gradient-to-r from-pink-500 to-purple-600
              text-white px-6 py-3 rounded-lg shadow-lg
              hover:shadow-2xl">
  زر فاخر
</button>

<!-- بطاقة صورة مع تأثيرات متعددة -->
<div class="group relative overflow-hidden rounded-lg">
  <img src="image.jpg"
       class="transform transition-all duration-500
              group-hover:scale-110 group-hover:rotate-2"
       alt="صورة">
  <div class="absolute inset-0 bg-black bg-opacity-0
              group-hover:bg-opacity-30 transition-all duration-500
              flex items-center justify-center
              transform translate-y-full group-hover:translate-y-0">
    <button class="bg-white text-gray-900 px-6 py-3 rounded-full
                   transform scale-0 group-hover:scale-100
                   transition-transform duration-300 delay-100">
      عرض التفاصيل
    </button>
  </div>
</div>

<!-- تأثير نبض التحميل -->
<div class="relative">
  <div class="w-16 h-16 bg-blue-500 rounded-full"></div>
  <div class="absolute inset-0 bg-blue-500 rounded-full
              animate-ping"></div>
  <div class="absolute inset-0 bg-blue-500 rounded-full
              animate-pulse"></div>
</div>

<!-- تأثير قلب البطاقة ثلاثي الأبعاد -->
<div class="relative w-64 h-96 perspective-1000">
  <div class="relative w-full h-full transition-transform duration-700
              transform-style-3d hover:rotate-y-180">
    <!-- الأمام -->
    <div class="absolute inset-0 backface-hidden
                bg-white rounded-lg shadow-xl p-6">
      محتوى الأمام
    </div>
    <!-- الخلف -->
    <div class="absolute inset-0 backface-hidden rotate-y-180
                bg-gradient-to-br from-purple-500 to-pink-500
                rounded-lg shadow-xl p-6 text-white">
      محتوى الخلف
    </div>
  </div>
</div>

<!-- رسوم متحركة لقائمة متداخلة -->
<ul class="space-y-2">
  <li class="transform -translate-x-full opacity-0
             animate-slide-in animation-delay-100">العنصر 1</li>
  <li class="transform -translate-x-full opacity-0
             animate-slide-in animation-delay-200">العنصر 2</li>
  <li class="transform -translate-x-full opacity-0
             animate-slide-in animation-delay-300">العنصر 3</li>
</ul>

التحويلات ثلاثية الأبعاد والمنظور

على الرغم من أن Tailwind لا يتضمن أدوات تحويل ثلاثية الأبعاد بشكل افتراضي، يمكنك توسيع التكوين لإضافتها، أو استخدام صيغة القيمة التعسفية.

<!-- إضافة المنظور -->
<div class="[perspective:1000px]">
  <div class="transform [transform:rotateY(45deg)]
              bg-blue-500 w-32 h-32"></div>
</div>

<!-- تأثير بطاقة ثلاثية الأبعاد -->
<div class="[perspective:1000px] hover:[perspective:500px]
            transition-all duration-500">
  <div class="[transform-style:preserve-3d] transform
              hover:[transform:rotateY(10deg)_rotateX(10deg)]
              transition-transform duration-500
              bg-white rounded-lg shadow-2xl p-8">
    <h3 class="text-xl font-bold">بطاقة ثلاثية الأبعاد</h3>
    <p>مرر للحصول على تأثير ثلاثي الأبعاد</p>
  </div>
</div>

<!-- توسيع التكوين للتحويلات ثلاثية الأبعاد -->
<!-- tailwind.config.js:
module.exports = {
  theme: {
    extend: {
      transformStyle: {
        '3d': 'preserve-3d',
      },
      backfaceVisibility: {
        hidden: 'hidden',
      },
      perspective: {
        500: '500px',
        1000: '1000px',
      },
    },
  },
}
-->

اعتبارات الأداء

<!-- استخدم transform-gpu لتسريع الأجهزة -->
<div class="transform-gpu hover:scale-110 transition-transform">
  تحويل مسرَّع
</div>

<!-- تجنب تحريك الخصائص المكلفة -->
<!-- ❌ سيء: يحرك التخطيط -->
<div class="hover:w-64 transition-all">سيء</div>

<!-- ✅ جيد: يحرك التحويل فقط -->
<div class="hover:scale-x-150 transition-transform">جيد</div>

<!-- استخدم will-change للرسوم المتحركة المعقدة -->
<div class="will-change-transform hover:rotate-180 transition-transform">
  تدوير محسَّن
</div>

<!-- لكن أزل will-change بعد الرسوم المتحركة -->
<div class="animate-spin will-change-transform
            animation-fill-mode-forwards
            after:will-change-auto">
  تحسين مؤقت
</div>

الخلاصة

توفر أدوات التحويل في Tailwind مجموعة أدوات قوية لإنشاء واجهات ديناميكية وجذابة:

• التحجيم: تغيير حجم العناصر بشكل متناسب أو لكل محور (scale-{n}، scale-x-{n}، scale-y-{n})
• التدوير: دوران العناصر مع تحكم دقيق بالدرجات (rotate-{deg}، -rotate-{deg})
• الإزاحة: تحريك العناصر دون التأثير على التخطيط (translate-x-{n}، translate-y-{n})
• الانحراف: إنشاء تأثيرات مائلة (skew-x-{deg}، skew-y-{deg})
• الأصل: التحكم في نقطة ارتكاز التحويل (origin-{position})
• التركيبات: تطبيق تحويلات متعددة لتأثيرات معقدة
• الأداء: استخدام transform-gpu و will-change للتحسين

التحويلات ضرورية لإنشاء تجارب ويب حديثة وتفاعلية. عند دمجها مع أدوات الانتقال في Tailwind، تتيح رسوم متحركة سلسة وعالية الأداء تعزز تجربة المستخدم دون الحاجة إلى CSS مخصص.