التحويلات ثنائية الأبعاد: الإزاحة، الدوران، التحجيم، الانحراف

مقدمة في التحويلات ثنائية الأبعاد في CSS

تتيح لك تحويلات CSS التلاعب بالعناصر بصريًا عن طريق تحريكها وتدويرها وتحجيمها وإمالتها دون الإخلال بالتدفق الطبيعي للمستند. على عكس خصائص مثل margin أو position، لا تؤثر التحويلات على تخطيط العناصر المحيطة. يظل العنصر المحوَّل يشغل مساحته الأصلية في المستند، لكن تمثيله البصري يتغير. هذا يجعل التحويلات قوية بشكل لا يصدق لإنشاء الرسوم المتحركة وتأثيرات التحويم والتخطيطات الديناميكية التي تبدو سلسة وعالية الأداء.

تُطبَّق جميع التحويلات ثنائية الأبعاد باستخدام خاصية transform. يمكنك تطبيق دالة تحويل واحدة أو ربط عدة دوال معًا. يطبق المتصفح هذه التحويلات بالنسبة لنقطة أصل التحويل للعنصر، والتي تكون افتراضيًا في مركز العنصر.

/* تحويل واحد */
.element {
    transform: rotate(45deg);
}

/* تحويلات متعددة مربوطة معًا */
.element {
    transform: translateX(50px) rotate(45deg) scale(1.2);
}

translate() -- تحريك العناصر

تنقل دالة translate() عنصرًا من موضعه الحالي على طول المحورين X و Y. تقبل قيمة واحدة أو قيمتين: الأولى للحركة الأفقية والثانية الاختيارية للحركة العمودية. القيم الموجبة لـ X تحرك العنصر إلى اليمين، والقيم الموجبة لـ Y تحركه إلى الأسفل. يمكنك استخدام أي وحدة طول في CSS، بما في ذلك البكسل و em و rem والنسب المئوية.

/* تحريك 50 بكسل لليمين و 30 بكسل للأسفل */
.move-both {
    transform: translate(50px, 30px);
}

/* تحريك أفقي فقط (100 بكسل لليمين) */
.move-right {
    transform: translateX(100px);
}

/* تحريك عمودي فقط (40 بكسل للأعلى) */
.move-up {
    transform: translateY(-40px);
}

/* استخدام النسب المئوية (نسبية لحجم العنصر نفسه) */
.move-percent {
    transform: translate(50%, -25%);
}

عند استخدام قيم النسبة المئوية مع translate()، تُحسَب النسبة بالنسبة لأبعاد العنصر نفسه وليس أبعاد العنصر الأب. هذا تمييز حاسم. على سبيل المثال، translateX(50%) على عنصر بعرض 200 بكسل يحركه 100 بكسل إلى اليمين. هذا السلوك يجعل translate() مفيدة بشكل استثنائي لتقنيات التوسيط.

تقنية التوسيط الكلاسيكية باستخدام translate()

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

.parent {
    position: relative;
    width: 500px;
    height: 400px;
    background: #f0f0f0;
}

.centered-child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* العنصر الآن في المنتصف تمامًا */
    /* بغض النظر عن عرضه أو ارتفاعه */
}

/* هذا مكافئ لـ: */
.centered-alternative {
    position: absolute;
    top: 50%;    /* نقل الحافة العلوية إلى مركز الأب */
    left: 50%;   /* نقل الحافة اليسرى إلى مركز الأب */
    transform: translate(-50%, -50%);
    /* -50% من العرض تسحبه للخلف لليسار */
    /* -50% من الارتفاع تسحبه للخلف للأعلى */
}

rotate() -- تدوير العناصر

تدور دالة rotate() عنصرًا في اتجاه عقارب الساعة حول نقطة أصل التحويل. القيم الموجبة تدور في اتجاه عقارب الساعة، بينما القيم السالبة تدور عكس اتجاه عقارب الساعة. يمكنك تحديد الدوران باستخدام عدة وحدات: الدرجات (deg)، والدورات (turn)، والراديان (rad)، أو الغراديان (grad).

/* تدوير 45 درجة في اتجاه عقارب الساعة */
.rotate-degrees {
    transform: rotate(45deg);
}

/* تدوير عكس اتجاه عقارب الساعة */
.rotate-negative {
    transform: rotate(-90deg);
}

/* دورة كاملة باستخدام الدورات (1turn = 360deg) */
.rotate-turn {
    transform: rotate(0.25turn); /* مثل 90deg */
}

/* استخدام الراديان (pi راديان = 180deg) */
.rotate-radians {
    transform: rotate(3.14159rad); /* مثل 180deg */
}

/* تدوير تفاعلي عند التحويم */
.icon {
    transition: transform 0.3s ease;
}

.icon:hover {
    transform: rotate(180deg);
}

الدوران مفيد بشكل خاص لإنشاء رسوم متحركة للأيقونات ومؤشرات التحميل والعناصر الزخرفية وتأثيرات التحويم التفاعلية. عند دمجه مع transition، ينشئ الدوران رسومًا متحركة سلسة وأنيقة تعزز تجربة المستخدم.

scale() -- تغيير حجم العناصر

تغير دالة scale() حجم العنصر. القيمة 1 تمثل الحجم الأصلي، والقيم الأكبر من 1 تكبر العنصر، والقيم بين 0 و 1 تصغره. يمكنك تحجيم كلا المحورين بشكل موحد أو كل محور بشكل مستقل.

/* تحجيم موحد إلى 1.5 ضعف (150%) */
.grow {
    transform: scale(1.5);
}

/* تحجيم بقيم مختلفة لـ X و Y */
.stretch {
    transform: scale(2, 0.5); /* ضعف العرض، نصف الارتفاع */
}

/* تحجيم أفقي فقط */
.wide {
    transform: scaleX(1.5);
}

/* تحجيم عمودي فقط */
.tall {
    transform: scaleY(2);
}

/* تصغير إلى نصف الحجم */
.shrink {
    transform: scale(0.5);
}

/* تأثير تحويم شائع: تكبير طفيف */
.card {
    transition: transform 0.2s ease;
}

.card:hover {
    transform: scale(1.05);
}

قلب العناصر بالتحجيم السلبي

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

/* قلب أفقي (انعكاس) */
.flip-horizontal {
    transform: scaleX(-1);
}

/* قلب عمودي */
.flip-vertical {
    transform: scaleY(-1);
}

/* قلب كلا المحورين (مثل rotate(180deg)) */
.flip-both {
    transform: scale(-1, -1);
}

/* استخدام عملي: قلب أيقونة سهم لتخطيطات RTL */
[dir="rtl"] .arrow-icon {
    transform: scaleX(-1);
}

skew() -- إمالة العناصر

تميل دالة skew() عنصرًا على طول المحورين X و Y بالزوايا المحددة. الإمالة تشوه شكل العنصر، وتحول المستطيلات إلى متوازيات أضلاع. تأخذ قيمة زاوية واحدة أو قيمتين للمحورين X و Y على التوالي.

/* إمالة على طول المحور X فقط */
.skew-x {
    transform: skewX(20deg);
}

/* إمالة على طول المحور Y فقط */
.skew-y {
    transform: skewY(-10deg);
}

/* إمالة كلا المحورين */
.skew-both {
    transform: skew(20deg, 10deg);
}

/* إنشاء زر على شكل متوازي أضلاع */
.parallelogram-btn {
    transform: skewX(-15deg);
    padding: 12px 30px;
    background: var(--primary);
    color: white;
}

/* إلغاء إمالة النص بالداخل ليبقى مقروءًا */
.parallelogram-btn span {
    display: inline-block;
    transform: skewX(15deg);
}

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

إنشاء فواصل أقسام مائلة

نمط تصميم ويب حديث شائع يستخدم تحويلات الإمالة لإنشاء حدود أقسام بزوايا تكسر رتابة الخطوط الأفقية المستقيمة.

/* إنشاء فاصل مائل باستخدام عنصر زائف */
.diagonal-section {
    position: relative;
    padding: 80px 0;
    background: var(--primary);
}

.diagonal-section::before {
    content: '';
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: 100px;
    background: inherit;
    transform: skewY(-3deg);
    transform-origin: top left;
}

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

يمكنك ربط عدة دوال تحويل في إعلان transform واحد. يطبقها المتصفح من اليمين إلى اليسار (الدالة الأخيرة المدرجة تُطبَّق أولاً). هذا الترتيب مهم بشكل كبير لأن التحويلات ليست تبادلية -- تطبيقها بترتيب مختلف ينتج نتائج مختلفة.

/* الترتيب 1: إزاحة ثم تدوير */
.order-a {
    transform: rotate(45deg) translateX(100px);
    /* أولاً تنقل 100 بكسل لليمين، ثم تدور 45 درجة */
    /* الإزاحة تحدث على طول المحور X الأصلي */
}

/* الترتيب 2: تدوير ثم إزاحة */
.order-b {
    transform: translateX(100px) rotate(45deg);
    /* أولاً تدور 45 درجة، ثم تنقل 100 بكسل */
    /* لكن "اليمين" الآن على طول المحور المُدوَّر! */
}

/* هذه تنتج نتائج مختلفة حتى لو */
/* استخدمت نفس الدوال بنفس القيم */

/* مزيج معقد لتأثير تحويم */
.fancy-card {
    transition: transform 0.4s ease;
}

.fancy-card:hover {
    transform: translateY(-10px) rotate(-2deg) scale(1.02);
}

transform-origin -- تغيير نقطة المحور

بشكل افتراضي، تُطبَّق التحويلات بالنسبة لمركز العنصر (50% 50%). تتيح لك خاصية transform-origin تغيير نقطة المرجع هذه. هذا مؤثر بشكل خاص للدوران والتحجيم، حيث يحدد الأصل نقطة المحور التي يحدث حولها التحويل.

/* الافتراضي: المركز */
.default-origin {
    transform-origin: center;
    /* مثل: transform-origin: 50% 50%; */
}

/* الزاوية العلوية اليسرى */
.top-left {
    transform-origin: top left;
    /* مثل: transform-origin: 0% 0%; */
    transform: rotate(45deg);
    /* يدور حول الزاوية العلوية اليسرى */
}

/* الزاوية السفلية اليمنى */
.bottom-right {
    transform-origin: bottom right;
    transform: scale(1.5);
    /* يتحجم من الزاوية السفلية اليمنى */
}

/* موضع مخصص بالبكسل */
.custom {
    transform-origin: 20px 80px;
    transform: rotate(30deg);
}

/* قيم نسبية */
.percentage {
    transform-origin: 25% 75%;
    transform: rotate(-15deg);
}

/* عملي: رسم متحرك لفتح باب */
.door {
    transform-origin: left center;
    transition: transform 0.5s ease;
}

.door:hover {
    transform: rotateY(-60deg);
}

/* دوران عقرب ساعة من المركز السفلي */
.clock-hand {
    transform-origin: bottom center;
    transform: rotate(90deg);
}

خصائص التحويل الفردية (CSS الحديث)

يقدم CSS الحديث خصائص تحويل فردية تسمح لك بتعيين translate و rotate و scale بشكل مستقل. هذا يحل المشكلة القديمة المتمثلة في تجاوز التحويلات لبعضها البعض ويجعل من السهل بكثير تحريك دوال التحويل الفردية بشكل منفصل.

/* النهج التقليدي: كل شيء في خاصية واحدة */
.traditional {
    transform: translateX(50px) rotate(45deg) scale(1.2);
}

/* النهج الحديث: خصائص فردية */
.modern {
    translate: 50px 0;
    rotate: 45deg;
    scale: 1.2;
}

/* الميزة الكبيرة: يمكنك تحريكها بشكل مستقل */
.animated-card {
    translate: 0 0;
    rotate: 0deg;
    scale: 1;
    transition: translate 0.3s ease,
                rotate 0.5s ease,
                scale 0.2s ease;
}

.animated-card:hover {
    translate: 0 -10px;
    rotate: 3deg;
    scale: 1.05;
    /* كل خاصية تتحرك بتوقيتها الخاص! */
}

/* تجاوز واحدة فقط دون التأثير على الأخريات */
.base {
    translate: 20px 0;
    rotate: 10deg;
    scale: 1.1;
}

.base:hover {
    scale: 1.3;
    /* translate و rotate تبقى دون تغيير */
}

تسريع GPU والأداء

تحويلات CSS هي واحدة من أكثر الطرق كفاءة لتحريك العناصر في المتصفح. عندما تستخدم transform و opacity، يمكن للمتصفح نقل العرض إلى وحدة معالجة الرسومات (GPU)، مما ينشئ طبقة تركيب منفصلة. هذا يعني أن المتصفح لا يحتاج إلى إعادة حساب التخطيط أو إعادة رسم العناصر الأخرى، مما يؤدي إلى رسوم متحركة سلسة بمعدل 60 إطارًا في الثانية.

/* سيء: تحريك خصائص التخطيط يؤدي إلى إعادة التدفق */
.slow-animation {
    transition: left 0.3s, top 0.3s;
}
.slow-animation:hover {
    left: 100px;
    top: 50px;
    /* يفرض إعادة حساب التخطيط لكل إطار */
}

/* جيد: استخدام transform لنفس التأثير البصري */
.fast-animation {
    transition: transform 0.3s;
}
.fast-animation:hover {
    transform: translate(100px, 50px);
    /* يتم تركيبه على GPU -- لا إعادة حساب للتخطيط */
}

/* تلميح للمتصفح لتجهيز طبقة */
.will-animate {
    will-change: transform;
}

/* أزل will-change عند اكتمال الرسم المتحرك */
/* لتحرير ذاكرة GPU (افعل ذلك عبر JavaScript) */

التحويلات لا تؤثر على تدفق المستند

خاصية أساسية لتحويلات CSS هي أنها لا تؤثر على تدفق المستند. يحسب المتصفح التخطيط كما لو أن التحويل غير موجود، ثم يطبق التحويل البصري بعد ذلك. هذا يعني أن العناصر المحوَّلة يمكن أن تتداخل بصريًا مع العناصر الأخرى دون دفعها بعيدًا، ومساحتها الأصلية في التخطيط تبقى محجوزة.

<style>
.container {
    display: flex;
    gap: 20px;
    padding: 40px;
}

.box {
    width: 100px;
    height: 100px;
    background: var(--primary-light);
    transition: transform 0.3s ease;
}

/* الصندوق الثاني يتحرك للأعلى لكن جيرانه يبقون في مكانهم */
.box:nth-child(2) {
    transform: translateY(-30px);
    /* الصناديق المحيطة لا تتأثر */
}

/* مقارنة مع margin الذي يؤثر على التدفق */
.box-with-margin:nth-child(2) {
    margin-top: -30px;
    /* هذا سيدفع العناصر المحيطة */
}
</style>

<div class="container">
    <div class="box">1</div>
    <div class="box">2 (مُزاح)</div>
    <div class="box">3</div>
</div>

استخدامات إبداعية وأمثلة عملية

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

تأثير الرفع عند التحويم للبطاقات

إزاحة طفيفة للأعلى عند التحويم، مدمجة مع ظل صندوق، تنشئ تأثير طفو أنيقًا يوفر ملاحظات بصرية واضحة.

.card {
    background: var(--bg-white);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* مع دوران طفيف لمزيد من الشخصية */
.card-playful:hover {
    transform: translateY(-8px) rotate(-1deg);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

تكبير الصورة عند التحويم

تحجيم صورة داخل حاوية مع إخفاء الفائض ينشئ تأثير تكبير سلسًا يُستخدم عادة في المعارض وشبكات المحافظ.

.image-container {
    overflow: hidden;
    border-radius: 8px;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.image-container:hover img {
    transform: scale(1.1);
    /* الصورة تتكبر لكن تبقى داخل الحاوية */
}

تأثير الضغط على الزر

دمج التحجيم مع translateY ينشئ رسمًا متحركًا ملموسًا للضغط على الزر يحاكي زرًا فيزيائيًا يُضغَط للأسفل.

.button {
    padding: 12px 32px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.1s ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button:active {
    transform: translateY(1px) scale(0.98);
}

تدوير الأيقونة عند التفاعل

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.accordion-icon {
    transition: transform 0.3s ease;
}

.accordion-header.active .accordion-icon {
    transform: rotate(180deg);
}

/* تدوير أيقونة زائد إلى X */
.menu-toggle {
    transition: transform 0.3s ease;
}

.menu-toggle.open {
    transform: rotate(45deg);
    /* يحول + إلى x */
}

قلب بطاقة بـ CSS فقط

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

.flip-card {
    width: 300px;
    height: 200px;
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s ease;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flip-card-front {
    background: var(--primary);
    color: white;
}

.flip-card-back {
    background: var(--bg-white);
    color: var(--text-dark);
    transform: rotateY(180deg);
}

أقسام مائلة باستخدام Skew

.angled-section {
    position: relative;
    padding: 100px 0;
    background: var(--bg-light);
    overflow: hidden;
}

/* حافة مائلة علوية */
.angled-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: -5%;
    width: 110%;
    height: 80px;
    background: var(--bg-white);
    transform: skewY(-3deg);
    transform-origin: top left;
}

/* حافة مائلة سفلية */
.angled-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -5%;
    width: 110%;
    height: 80px;
    background: var(--bg-white);
    transform: skewY(3deg);
    transform-origin: bottom right;
}

الأخطاء الشائعة ونصائح التصحيح

يمكن أن تنتج التحويلات أحيانًا نتائج غير متوقعة. إليك أكثر المشكلات شيوعًا وكيفية حلها.

• العناصر السطرية لا يمكن تحويلها. خاصية transform تعمل فقط على العناصر الكتلية و inline-block. إذا كنت بحاجة لتحويل <span> أو <a>، حدد display: inline-block أو display: block عليه أولاً.
• نص ضبابي بعد التحويلات. العرض بدقة أقل من البكسل أثناء التحويلات يمكن أن يجعل النص يبدو ضبابيًا. هذا ملحوظ بشكل خاص مع قيم translate التي تؤدي إلى بكسلات كسرية. جرب استخدام translateZ(0) أو will-change: transform لترقية العنصر إلى طبقته الخاصة.
• تجاوز التحويلات. تعيين خاصية transform جديدة يستبدل القديمة بالكامل. استخدم خصائص CSS المخصصة أو خصائص التحويل الفردية لإدارة تحويلات مستقلة متعددة.
• التموضع الثابت داخل التحويلات. عنصر مع position: fixed يتصرف كـ position: absolute إذا كان لأي عنصر أب تحويل مُطبَّق. هذا سلوك متصفح معروف يمكن أن يكسر الرؤوس الثابتة أو التراكبات الثابتة داخل الحاويات المحوَّلة.

/* استخدام خصائص CSS المخصصة لتركيب التحويلات */
.element {
    --translate: translate(0, 0);
    --rotate: rotate(0deg);
    --scale: scale(1);
    transform: var(--translate) var(--rotate) var(--scale);
}

.element:hover {
    --translate: translate(0, -10px);
    --scale: scale(1.05);
    /* الدوران يبقى عند 0deg دون أن يُتجاوز */
}

.element.rotated {
    --rotate: rotate(45deg);
    /* الإزاحة والتحجيم محفوظان */
}