تغییر شکل با transform در CSS — راهنمای جامع

خواص transform در CSS ابزاری قدرتمند برای تغییر هندسی عناصر در صفحه است. با استفاده از transform می‌توانید عناصر را بچرخانید، جابجا کنید، بزرگ‌نمایی/کوچک‌نمایی کنید، تاب بدهید و حتی تبدیلات سه‌بعدی واقعی را شبیه‌سازی کنید. در این راهنما به مفاهیم پایه، نمونه‌های عملی، نکات عملکردی و بهترین شیوه‌ها می‌پردازیم.

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

• تغییرات بصری بدون دست‌کاری در جریان سند (document flow).
• قابلیت انیمیت روان با transition و keyframes.
• بهینه برای GPU؛ معمولاً سریع‌تر از تغییر موقعیت با top/left.

توابع اصلی transform

مثال پایه: جابجایی و چرخش

/* HTML:
<div class="card">کارت نمونه</div>
*/ .card { width: 200px; height: 120px; background: linear-gradient(135deg,#6a11cb,#2575fc); color: #fff; display: flex; align-items: center; justify-content: center; transform: translate(20px, 10px) rotate(-6deg); transition: transform 300ms ease; } .card:hover { transform: translate(0, 0) rotate(0deg) scale(1.05); }

در این کد، عنصر .card ابتدا با translate و rotate قرار گرفته و با:hover به حالت اصلی برمی‌گردد و کمی بزرگ‌تر می‌شود. استفاده از transform برای حرکت و چرخش باعث می‌شود تغییرات روان و بدون بازچینی (reflow) عناصر دیگر صفحه باشد.

انیمیشن با transform: transition و keyframes

.button {
  display: inline-block;
  padding: 10px 20px;
  background: #ff6b6b;
  color: #fff;
  border-radius: 6px;
  transform-origin: center;
  transition: transform 250ms cubic-bezier(.2,.8,.2,1);
}
.button:active {
  transform: scale(0.96) translateY(2px);
}

این نمونه برای دکمه‌ها کاربرد دارد: هنگام فشردن (active) دکمه کمی کوچک و پایین می‌رود. transform-origin مرکز را تعیین می‌کند و transition انیمیشن را روان می‌سازد.

تبدیلات سه‌بعدی و پرسپکتیو

.scene {
  perspective: 800px;
}
.card-3d {
  transform-style: preserve-3d;
  transition: transform 400ms;
}
.card-3d:hover {
  transform: rotateY(20deg) translateZ(30px);
}

برای دید سه‌بعدی ابتدا container را با perspective تنظیم می‌کنیم. transform-style: preserve-3d باعث می‌شود فرزندان کارت، عمق سه‌بعدی را حفظ کنند. rotateY و translateZ جابجایی در فضای سه‌بعدی را انجام می‌دهند.

مثال پیشرفته: ترکیب چندین transform و استفاده از transform-origin

.thumb {
  width: 140px;
  height: 100px;
  transform-origin: 10% 20%;
  transform: translate(10px, 0) rotate(-8deg) scale(1);
}
.thumb:hover {
  transform: translate(0, -6px) rotate(0deg) scale(1.08);
}

transform-origin نقطه‌ای را مشخص می‌کند که حول آن چرخش یا اسکیل اتفاق می‌افتد. تغییر این مقدار می‌تواند رفتار چرخش را به صورت دقیق کنترل کند.

matrix() — وقتی نیاز به کنترل کامل دارید

/* matrix(a, b, c, d, tx, ty)
   a, b, c, d کنترل چرخش/مقیاس/شیب
   tx, ty کنترل جابجایی */.box {
  transform: matrix(1, 0.2, -0.2, 1, 30, 10);
}

matrix() برای تبدیل‌های پیچیده و محاسبات دقیق مفید است، اما خوانایی کمتری دارد. معمولاً برای تبدیل‌هایی که از تغییرات ریاضی یا ابزارهای گرافیکی صادر می‌شوند کاربرد دارد.

عملکرد و بهترین شیوه‌ها

• به جای تغییر top/left از translate استفاده کنید تا reflow کمتر و repaint/ compositing سریع‌تر شود.
• برای انیمیشن‌های سنگین از will-change: transform یا translateZ(0) برای hint به مرورگر استفاده کنید، اما زیاده‌روی نکنید چون ممکن است حافظه GPU را مصرف کند.
• ترکیب transform با opacity و filter می‌تواند ترکیبات بصری زیبا بسازد؛ اما احتیاط کنید چون filter ممکن است عملکرد را پایین بیاورد.
• برای عناصر تعاملی، میزان transform را طوری انتخاب کنید که خوانایی متن و دسترسی (accessibility) حفظ شود.

مثال بهینه‌سازی: استفاده از translate به جای left

/* بد: باعث reflow مکرر */.element { position: absolute; left: 100px; transition: left 300ms; }

/* خوب: استفاده از transform */.element { transform: translateX(100px); transition: transform 300ms; }

با تغییر translateX تنها لایه (layer) مربوط به عنصر دوباره رندر می‌شود و مرورگر می‌تواند آن را با GPU سریع‌تر پردازش کند، در حالی که تغییر left باعث reflow می‌شود و کل صفحه ممکن است بازچینی شود.

نکات تکمیلی و تله‌های رایج

• transform فقط ظاهر را تغییر می‌دهد؛ ساختار DOM و محل واقعی عنصر در توالی صفحه تغییر نمی‌کند — توجه کنید برای محاسبات طول و عرض عنصر از getBoundingClientRect استفاده کنید.
• در سازگاری مرورگرهای قدیمی ممکن است به prefix نیاز باشد، ولی در مرورگرهای مدرن عموماً نیازی نیست.
• backface-visibility و perspective برای عناصر دوطرفه (flip) اهمیت دارند.

جمع‌بندی

transform در CSS یک ابزار صنعتی برای طراحی‌های تعاملی و انیمیشن‌های روان است. با رعایت نکات عملکردی و انتخاب توابع مناسب (مثل translate برای جابجایی و scale/rotate برای تغییر ابعاد و چرخش) می‌توانید تجربه کاربری بهتری فراهم کنید. برای عملیات‌های پیچیده از matrix یا ترکیب سه‌بعدی استفاده کنید اما همیشه خوانایی، دسترسی و مصرف منابع را در نظر داشته باشید.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال