Transform در CSS

بهنام نوبخت · ۱۴۰۵/۶/۲۸

در طراحی رابط کاربری مدرن، فقط قرار دادن عناصر در صفحه کافی نیست. گاهی لازم است یک کارت هنگام Hover کمی بالا بیاید، یک دکمه کمی بزرگ‌تر شود، یک آیکون بچرخد یا یک تصویر هنگام تعامل کاربر تغییر اندازه دهد.

برای انجام بسیاری از این تغییرات، CSS ویژگی قدرتمندی به نام transform در اختیار ما قرار می‌دهد.

با transform می‌توانیم ظاهر و موقعیت بصری یک عنصر را بدون تغییر دادن ساختار اصلی Layout تغییر دهیم. CSS Transform امکان جابه‌جایی، چرخش، تغییر اندازه و کج کردن عناصر را در فضای دوبعدی و سه‌بعدی فراهم می‌کند.

در این مقاله با مهم‌ترین Transformها آشنا می‌شویم:

Transform چیست؟

ویژگی transform به ما اجازه می‌دهد شکل یا موقعیت بصری یک عنصر را تغییر دهیم.

ساختار ساده آن:

.element {
    transform: ...;
}

برای مثال:

.box {
    transform: rotate(20deg);
}

در این مثال عنصر ۲۰ درجه می‌چرخد.

یا:

.box {
    transform: scale(1.2);
}

عنصر به اندازه ۱.۲ برابر بزرگ می‌شود.

Transform می‌تواند یک عنصر را جابه‌جا، بچرخاند، بزرگ یا کوچک و کج کند.

چرا از Transform استفاده می‌کنیم؟

فرض کنید یک کارت داریم و می‌خواهیم هنگام Hover کمی به سمت بالا حرکت کند.

یک روش این است که مقدار top را تغییر دهیم، اما برای چنین تغییر بصری، transform ابزار مناسب‌تری است.

مثلاً:

.card:hover {
    transform: translateY(-10px);
}

این تکنیک در طراحی:

بسیار کاربردی است.

Transform همچنین برای تغییر موقعیت بصری یک عنصر بدون برهم زدن جریان عادی سند طراحی شده است.

Translate

اولین Transform مهم، translate است.

Translate یعنی جابه‌جا کردن عنصر.

ساختار:

transform: translate(x, y);

مثال:

.box {
    transform: translate(50px, 20px);
}

در این مثال:

عنصر ۵۰ پیکسل در راستای افقی جابه‌جا می‌شود.
عنصر ۲۰ پیکسل در راستای عمودی جابه‌جا می‌شود.

translate برای جابه‌جایی افقی و عمودی عنصر در فضای دوبعدی استفاده می‌شود.

Translate در محور X

اگر فقط بخواهیم عنصر را افقی جابه‌جا کنیم:

.box {
    transform: translateX(50px);
}

مثلاً:

.box:hover {
    transform: translateX(10px);
}

عنصر هنگام Hover کمی به سمت راست حرکت می‌کند.

برای حرکت به سمت چپ:

.box:hover {
    transform: translateX(-10px);
}

Translate در محور Y

برای جابه‌جایی عمودی:

.box {
    transform: translateY(30px);
}

مقدار مثبت:

transform: translateY(30px);

عنصر را به سمت پایین می‌برد.

مقدار منفی:

transform: translateY(-30px);

عنصر را به سمت بالا می‌برد.

به همین دلیل این الگو بسیار رایج است:

.card:hover {
    transform: translateY(-8px);
}

یعنی کارت هنگام Hover هشت پیکسل به سمت بالا حرکت کند.

Translate با درصد

Translate فقط با px کار نمی‌کند.

می‌توانیم از درصد نیز استفاده کنیم:

.box {
    transform: translateX(50%);
}

در این حالت مقدار جابه‌جایی نسبت به اندازه خود عنصر محاسبه می‌شود.

این تکنیک در Center کردن عناصر بسیار مهم است.

مثلاً:

.box {
    position: absolute;

    left: 50%;
    transform: translateX(-50%);
}

این روش یکی از الگوهای کلاسیک برای قرار دادن عنصر در مرکز افقی است.

Rotate

دومین Transform مهم rotate() است.

Rotate یعنی چرخاندن عنصر.

مثال:

.box {
    transform: rotate(45deg);
}

عنصر ۴۵ درجه می‌چرخد.

می‌توانیم از مقدار منفی نیز استفاده کنیم:

.box {
    transform: rotate(-20deg);
}

تابع rotate() عنصر را در صفحه دوبعدی حول یک نقطه ثابت می‌چرخاند.

واحدهای زاویه

برای Rotate معمولاً از deg استفاده می‌کنیم:

transform: rotate(45deg);

اما واحدهای دیگری نیز وجود دارند.

مثلاً:

transform: rotate(0.25turn);

که معادل یک‌چهارم دور است.

همچنین:

transform: rotate(1turn);

یک دور کامل ایجاد می‌کند.

چرخاندن آیکون

مثلاً:

.icon {
    display: inline-block;
}

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

این تکنیک برای آیکون‌ها و المان‌های تزئینی بسیار کاربردی است.

Scale

scale() برای بزرگ یا کوچک کردن عنصر استفاده می‌شود.

مثال:

.box {
    transform: scale(1.2);
}

عنصر ۲۰ درصد بزرگ‌تر می‌شود.

برای کوچک کردن:

.box {
    transform: scale(0.8);
}

عنصر به ۸۰ درصد اندازه اصلی خود تبدیل می‌شود.

تابع scale() می‌تواند مقدار مقیاس افقی و عمودی را جداگانه کنترل کند.

Scale با دو مقدار

.box {
    transform: scale(1.2, 0.8);
}

در اینجا:

مقدار اول مربوط به محور X است.
مقدار دوم مربوط به محور Y است.

بنابراین عنصر در جهت افقی بزرگ‌تر و در جهت عمودی کوچک‌تر می‌شود.

ScaleX

فقط محور افقی:

.box {
    transform: scaleX(1.5);
}

ScaleY

فقط محور عمودی:

.box {
    transform: scaleY(1.5);
}

استفاده از Scale برای Hover

یکی از رایج‌ترین کاربردهای Transform:

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

یعنی Button هنگام Hover کمی بزرگ شود.

برای کارت:

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

اما بهتر است مقدار Scale زیاد نباشد.

مثلاً:

transform: scale(1.5);

برای یک Card معمولاً بیش از حد شدید است.

Skew

skew() برای کج کردن یا مایل کردن عنصر استفاده می‌شود.

مثال:

.box {
    transform: skew(20deg);
}

این مقدار باعث کج شدن عنصر در محور X می‌شود.

می‌توانیم هر دو محور را نیز مشخص کنیم:

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

تابع skew یک Transform دوبعدی است که عنصر را در محورهای X و Y کج می‌کند.

SkewX

.box {
    transform: skewX(20deg);
}

SkewY

.box {
    transform: skewY(20deg);
}

Skew بیشتر برای طراحی‌های گرافیکی و المان‌های تزئینی استفاده می‌شود تا اجزای معمول رابط کاربری.

ترکیب Transformها

یکی از قابلیت‌های مهم این است که می‌توانیم چند Transform را با هم استفاده کنیم.

مثلاً:

.card:hover {
    transform:
        translateY(-10px)
        scale(1.03)
        rotate(1deg);
}

در اینجا سه Transform داریم:

جابه‌جایی به سمت بالا
کمی بزرگ شدن
چرخش بسیار کم

این نوع ترکیب می‌تواند Hover بسیار جذابی ایجاد کند.

ترتیب Transformها مهم است

این نکته بسیار مهم است.

به مثال زیر توجه کنید:

.box {
    transform:
        rotate(45deg)
        translateX(100px);
}

و:

.box {
    transform:
        translateX(100px)
        rotate(45deg);
}

این دو الزاماً نتیجه بصری یکسانی ندارند.

ترتیب Transformها روی نتیجه نهایی تأثیر می‌گذارد. MDN نیز تأکید می‌کند که ترتیب نوشتن Transformها مهم است و تغییر ترتیب می‌تواند مسیر جابه‌جایی را تغییر دهد.

بنابراین وقتی چند Transform را ترکیب می‌کنید، همیشه نتیجه را بررسی کنید.

Transform Origin

به صورت پیش‌فرض، Transform از یک نقطه مشخص نسبت به عنصر انجام می‌شود.

با ویژگی:

transform-origin

می‌توانیم این نقطه را تغییر دهیم.

مثلاً:

.box {
    transform-origin: center;
}

یا:

.box {
    transform-origin: top left;
}

مثال چرخش از گوشه

.box {
    transform-origin: top left;
    transform: rotate(20deg);
}

در این حالت عنصر از گوشه بالا سمت چپ خود می‌چرخد.

این ویژگی برای ساخت:

منوهای بازشونده
کارت‌های چرخشی
آیکون‌ها
عناصر تزئینی
انیمیشن‌ها

بسیار مفید است.

مقادیر رایج Transform Origin

transform-origin: center;

transform-origin: top center;

transform-origin: bottom center;

transform-origin: left center;

transform-origin: right center;

همچنین می‌توانیم مقدار دقیق بدهیم:

transform-origin: 20px 30px;

Transform سه‌بعدی

Transform فقط به فضای دوبعدی محدود نیست.

CSS از Transformهای سه‌بعدی نیز پشتیبانی می‌کند. Transform functions شامل توابعی مانند rotateX()، rotateY()، rotateZ()، translateZ() و perspective() هستند.

مثلاً:

.box {
    transform: rotateX(45deg);
}

یا:

.box {
    transform: rotateY(45deg);
}

RotateX

.box {
    transform: rotateX(45deg);
}

عنصر حول محور افقی X می‌چرخد.

RotateY

.box {
    transform: rotateY(45deg);
}

عنصر حول محور عمودی Y می‌چرخد.

RotateZ

.box {
    transform: rotateZ(45deg);
}

rotateZ() در عمل همان چرخش دوبعدی حول محور Z است و رفتاری مشابه rotate() دارد.

TranslateZ

در فضای سه‌بعدی می‌توانیم عنصر را در محور Z نیز جابه‌جا کنیم:

.box {
    transform: translateZ(50px);
}

اما برای مشاهده بهتر عمق، معمولاً باید Perspective نیز در طراحی سه‌بعدی در نظر گرفته شود.

Perspective

Perspective باعث می‌شود فاصله و عمق در فضای سه‌بعدی قابل مشاهده‌تر شود.

مثلاً:

.card {
    transform:
        perspective(500px)
        rotateY(30deg);
}

در این حالت کارت با یک چرخش سه‌بعدی نمایش داده می‌شود.

یک کارت سه‌بعدی ساده

HTML

<div class="card-3d">
    <h2>CSS Transform</h2>
    <p>
        طراحی رابط کاربری مدرن
    </p>
</div>

CSS

.card-3d {
    width: 300px;
    padding: 30px;

    border-radius: 20px;

    background: #111827;
    color: white;

    transform:
        perspective(700px)
        rotateY(-12deg);
}

با تغییر مقدار rotateY می‌توانید زاویه کارت را تغییر دهید.

Transform و Layout

یکی از نکات مهم Transform این است که تغییر بصری عنصر لزوماً باعث تغییر جای آن در جریان عادی Layout نمی‌شود.

مثلاً:

.box {
    transform: translateX(100px);
}

ممکن است عنصر از نظر بصری ۱۰۰ پیکسل جابه‌جا شود، اما فضای اصلی آن در Layout همچنان حفظ شود. CSS Transform اساساً دستگاه مختصات بصری را تغییر می‌دهد و جریان معمول سند را به همان شکل روش‌های Layout مانند تغییر margin یا ابعاد تغییر نمی‌دهد.

به همین دلیل Transform برای افکت‌های Hover و حرکت‌های بصری بسیار کاربردی است.

Transform و Transition

Transform به تنهایی یک تغییر ناگهانی ایجاد می‌کند.

مثلاً:

.card:hover {
    transform: translateY(-10px);
}

اگر بخواهیم حرکت نرم باشد، در مقاله بعدی به صورت کامل با transition کار خواهیم کرد.

فعلاً می‌توانیم یک نمونه ساده ببینیم:

.card {
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-10px);
}

حالا کارت به صورت نرم حرکت می‌کند.

ترکیب transform و transition یکی از پایه‌های مهم Micro Interaction در رابط کاربری است.

ساخت کارت سرویس مدرن

حالا یک مثال واقعی طراحی کنیم.

HTML

<div class="service-card">

    <div class="service-icon">
        WEB
    </div>

    <h2>
        طراحی سایت
    </h2>

    <p>
        طراحی وب‌سایت حرفه‌ای و Responsive
        برای کسب‌وکار شما.
    </p>

    <a href="#">
        مشاهده خدمات
    </a>

</div>

CSS

.service-card {
    width: 320px;

    padding: 30px;

    border-radius: 24px;

    background: #111827;

    color: white;

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.2);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.service-card:hover {
    transform:
        translateY(-10px)
        scale(1.02);

    box-shadow:
        0 30px 70px
        rgba(0, 0, 0, 0.3);
}

.service-icon {
    width: 60px;
    height: 60px;

    display: grid;
    place-items: center;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #ff7a00,
            #7c3aed
        );

    font-weight: 800;
}

.service-card h2 {
    margin-top: 24px;
}

.service-card p {
    color: #cbd5e1;

    line-height: 1.8;
}

.service-card a {
    display: inline-block;

    margin-top: 20px;

    padding: 12px 20px;

    border-radius: 10px;

    background: #ff7a00;

    color: white;

    text-decoration: none;
}

در این مثال:

transform:
    translateY(-10px)
    scale(1.02);

باعث می‌شود کارت هنگام Hover:

کمی به سمت بالا حرکت کند.
کمی بزرگ‌تر شود.

و به کمک transition این تغییر به صورت نرم انجام می‌شود.

استفاده از Transform برای تصویر

Transform برای تصاویر نیز بسیار کاربردی است.

<div class="image-wrapper">
    <img src="image.jpg" alt="نمونه تصویر">
</div>

.image-wrapper {
    overflow: hidden;
    border-radius: 20px;
}

.image-wrapper img {
    display: block;
    width: 100%;

    transition: transform 0.4s ease;
}

.image-wrapper:hover img {
    transform: scale(1.08);
}

در اینجا تصویر هنگام Hover بزرگ می‌شود، اما به دلیل:

overflow: hidden;

از محدوده والد خارج نمی‌شود.

این تکنیک در:

گالری تصاویر
فروشگاه اینترنتی
کارت محصولات
Portfolio
Blog

بسیار رایج است.

چرخش آیکون با Transform

فرض کنید یک آیکون فلش داریم:

<span class="arrow">
    →
</span>

می‌توانیم آن را هنگام Hover حرکت دهیم:

.arrow {
    display: inline-block;

    transition: transform 0.3s ease;
}

a:hover .arrow {
    transform: translateX(6px);
}

این یکی از ساده‌ترین Micro Interactionها است.

Transformهای جدید مستقل

در CSS مدرن، علاوه بر transform می‌توان برخی Transformها را به صورت Propertyهای مستقل نیز نوشت:

translate
rotate
scale

مثلاً:

.card {
    translate: 0 -10px;
}

یا:

.card {
    scale: 1.05;
}

یا:

.card {
    rotate: 5deg;
}

این Propertyهای مستقل در CSS مدرن پشتیبانی می‌شوند و امکان کنترل جداگانه Transformها را فراهم می‌کنند.

با این حال، برای یادگیری و بسیاری از پروژه‌های معمول، آشنایی کامل با:

transform

همچنان ضروری است.

یک نکته مهم درباره Inline Elementها

همه عناصر HTML به یک شکل قابل Transform نیستند.

CSS Transform روی عناصر قابل Transform اعمال می‌شود و برخی Boxهای خاص، مانند non-replaced inline boxes، استثناهایی دارند.

برای مثال اگر می‌خواهیم یک متن Inline را Transform کنیم، معمولاً بهتر است آن را به صورت:

display: inline-block;

درآوریم:

span {
    display: inline-block;
    transform: rotate(10deg);
}

اشتباهات رایج در Transform

استفاده بیش از حد از Scale

اگر تمام کارت‌ها هنگام Hover به مقدار زیادی بزرگ شوند، رابط کاربری آشفته خواهد شد.

مثلاً:

transform: scale(1.5);

برای یک Card معمولاً مناسب نیست.

در بسیاری از موارد مقدارهای کوچک‌تر مانند:

transform: scale(1.02);

نتیجه بهتری ایجاد می‌کنند.

استفاده زیاد از Rotate

چرخش‌های شدید معمولاً خوانایی و نظم رابط کاربری را کاهش می‌دهند.

برای عناصر UI معمولاً مقادیر کوچک مانند:

rotate(2deg)

یا:

rotate(-2deg)

کافی است.

فراموش کردن ترتیب Transformها

این دو:

transform:
    translateX(100px)
    rotate(30deg);

و:

transform:
    rotate(30deg)
    translateX(100px);

می‌توانند نتیجه متفاوتی ایجاد کنند.

Transform کردن عنصر بدون توجه به Origin

اگر نقطه چرخش مناسب نباشد، نتیجه ممکن است عجیب به نظر برسد.

در چنین شرایطی:

transform-origin

را بررسی کنید.

استفاده از Transform برای همه چیز

Transform برای تغییرات بصری بسیار مناسب است، اما جایگزین سیستم Layout نیست.

برای Layout بهتر است از ابزارهایی مانند:

Flexbox
Grid
Margin
Padding
Position

استفاده کنیم.

Transform بیشتر برای تغییر بصری و تعاملات مناسب است.

تمرین‌های این مقاله

تمرین ۱

یک مربع بسازید و آن را با:

translateX()

به سمت راست حرکت دهید.

تمرین ۲

یک مربع بسازید و با rotate() آن را ۴۵ درجه بچرخانید.

تمرین ۳

یک تصویر ایجاد کنید که هنگام Hover کمی بزرگ شود.

تمرین ۴

یک کارت ایجاد کنید که هنگام Hover:

۱۰ پیکسل به بالا حرکت کند.
۲ درصد بزرگ‌تر شود.
۲ درجه بچرخد.

تمرین ۵

یک عنصر ایجاد کنید که از گوشه بالا سمت چپ خود بچرخد.

برای این کار از:

transform-origin

استفاده کنید.

تمرین ۶

یک کارت سه‌بعدی با rotateY ایجاد کنید.

جمع‌بندی

transform یکی از مهم‌ترین ابزارهای CSS برای ایجاد تغییرات بصری و تعاملات مدرن است.

با استفاده از آن می‌توانیم یک عنصر را:

جابه‌جا کنیم:

transform: translate(20px, 10px);

بچرخانیم:

transform: rotate(15deg);

بزرگ یا کوچک کنیم:

transform: scale(1.1);

کج کنیم:

transform: skew(10deg);

و حتی چند Transform را با هم ترکیب کنیم:

transform:
    translateY(-8px)
    scale(1.03)
    rotate(1deg);

همچنین یاد گرفتیم که transform-origin نقطه شروع Transform را کنترل می‌کند و Transformهای سه‌بعدی مانند rotateX()، rotateY() و translateZ() امکان ایجاد افکت‌های عمقی را فراهم می‌کنند.

اما Transform زمانی واقعاً قدرتمند می‌شود که آن را با ویژگی دیگری ترکیب کنیم:

transition

با Transition می‌توانیم تغییرات Transform را از حالت ناگهانی خارج کرده و به حرکت‌های نرم و حرفه‌ای تبدیل کنیم.

۱۰

نظرات

هنوز نظری ثبت نشده است.