تبدیلات دوبعدی (2D Transforms)

آشنایی با transform در CSS: translate، rotate، scale، skew و ترکیب آن‌ها

تبدیلات (Transforms) در CSS

transform به شما اجازه می‌دهد عناصر را بچرخانید، جابه‌جا کنید، بزرگ/کوچک کنید یا کج کنید — بدون تأثیر بر چیدمان.

توابع ۲D

تابعتوضیحمثال
translate()جابه‌جاییtranslate(50px, 20px)
rotate()چرخشrotate(45deg)
scale()بزرگنماییscale(1.5)
skew()کج کردنskew(20deg)
matrix()هر تبدیلاتماتریس ۲×۳

۱. translate (جابه‌جایی)

.box {
        transform: translate(50px, 100px);  /* x, y */
        /* مثل relative اما بدون رزرو فضا */
    }
    
    /* فقط افقی */
    transform: translateX(50px);
    
    /* فقط عمودی */
    transform: translateY(100px);
    
    /* وسط‌چین با translate */
    .center {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
    }

۲. rotate (چرخش)

.box {
        transform: rotate(45deg);   /* ۴۵ درجه ساعتگرد */
        transform: rotate(-30deg);  /* پادساعتگرد */
    }

۳. scale (بزرگنمایی)

.box {
        transform: scale(1.5);       /* ۱.۵ برابر */
        transform: scale(0.5);       /* نصف */
        transform: scale(2, 1);      /* افقی ۲ برابر */
    }

۴. skew (کج کردن)

.box {
        transform: skew(20deg, 10deg);
        transform: skewX(20deg);
        transform: skewY(10deg);
    }

ترکیب چند تبدیل

.box {
        transform: translate(50px, 0) rotate(45deg) scale(1.2);
        /* ترتیب مهم است! */
    }

transform-origin

مبدأ تبدیل را تعیین می‌کند:

.box {
        transform-origin: center;     /* مرکز (پیش‌فرض) */
        transform-origin: top right;  /* بالا راست */
        transform-origin: 0 0;        /* گوشه */
        transform: rotate(45deg);
    }

کاربردهای رایج

/* hover با زوم */
    .card:hover {
        transform: scale(1.05);
        transition: transform 0.3s;
    }
    
    /* دکمه با افکت فشردن */
    .btn:active {
        transform: scale(0.95);
    }
    
    /* آیکون چرخان */
    .loading {
        animation: spin 1s linear infinite;
    }
    @keyframes spin {
        to { transform: rotate(360deg); }
    }

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط