تولید کننده تبدیل
ویژگیهای تبدیل CSS را به صورت بصری ایجاد و پیشنمایش کنید.
تبدیل CSS یک ویژگی قدرتمند CSS است که به شما امکان میدهد عناصر وب را در فضای دو بعدی یا سه بعدی تبدیل کنید. از طریق تبدیلهایی مانند انتقال، چرخش، مقیاسبندی و کج کردن، میتوانید طرحهای وب پویا و تعاملی ایجاد کنید. به راحتی افکتهای مورد نظر را با پیشنمایش در زمان واقعی ایجاد کنید.
transform: none;توابع تبدیل
- • translate(x, y): translate(x, y): انتقال عنصر به اندازه x, y
- • scale(x, y): scale(x, y): مقیاسبندی عنصر با نسبت x, y
- • rotate(angle): rotate(angle): چرخش عنصر با زاویه
- • skew(x, y): skew(x, y): کج کردن عنصر با درجه x, y
نکات استفاده
- • چندین تابع تبدیل را میتوان با فاصله ترکیب کرد
- • مبدأ تبدیل را با transform-origin تغییر دهید
- • برای ایجاد افکتهای انیمیشن از transition استفاده کنید
- • برای تبدیلهای سه بعدی از ویژگی perspective استفاده کنید
🎯 مفاهیم پایه تبدیل
تبدیل CSS یک ویژگی CSS است که شکل، اندازه و موقعیت عناصر را تغییر میدهد. این ویژگی امکان تبدیل بصری عناصر را بدون ایجاد اختلال در جریان عادی سند فراهم میکند.
نحو پایه:
transform: function(value) function(value) ...;📐 جزئیات تابع تبدیل
🔄 انتقال (حرکت)
- •
translate(x, y): translate(x, y): حرکت در امتداد محورهای X, Y - •
translateX(x): translateX(x): حرکت فقط در امتداد محور X - •
translateY(y): translateY(y): حرکت فقط در امتداد محور Y - •
translate3d(x, y, z): translate3d(x, y, z): حرکت سه بعدی
transform: translate(50px, 100px);📏 مقیاس (تغییر اندازه)
- •
scale(x, y): scale(x, y): مقیاسبندی محورهای X, Y - •
scaleX(x): scaleX(x): مقیاسبندی فقط محور X - •
scaleY(y): scaleY(y): مقیاسبندی فقط محور Y - • بزرگتر از ۱ بزرگ میکند، کوچکتر از ۱ کوچک میکند
transform: scale(1.5, 0.8);🔄 چرخش (چرخش)
- •
rotate(angle): rotate(angle): چرخش حول محور Z - •
rotateX(angle): rotateX(angle): چرخش حول محور X - •
rotateY(angle): rotateY(angle): چرخش حول محور Y - • از واحدهای deg, rad, turn برای زوایا استفاده کنید
transform: rotate(45deg);📐 کج کردن (برش)
- •
skew(x, y): skew(x, y): کج کردن در امتداد محورهای X, Y - •
skewX(angle): skewX(angle): کج کردن در امتداد محور X - •
skewY(angle): skewY(angle): کج کردن در امتداد محور Y - • تبدیل به شکل متوازیالاضلاع
transform: skew(15deg, 5deg);🎨 مبدأ تبدیل (نقطه تبدیل)
ویژگی transform-origin نقطه مبدأ تبدیل را تنظیم میکند. پیشفرض مرکز عنصر (۵۰٪ ۵۰٪) است.
استفاده از کلمات کلیدی
transform-origin: top left;استفاده از درصدها
transform-origin: 25% 75%;استفاده از پیکسلها
transform-origin: 10px 20px;⚡ نکات بهینهسازی عملکرد
✅ توصیهها
- • فقط transform و opacity را متحرک کنید
- • از ویژگی will-change استفاده کنید
- • از شتابدهی سه بعدی استفاده کنید (translateZ(0))
- • برای عملکرد بهتر لایههای ترکیبی ایجاد کنید
❌ مواردی که باید از آنها اجتناب کرد
- • متحرک کردن عرض، ارتفاع
- • متحرک کردن موقعیتهای چپ، بالا
- • تودرتوی بیش از حد تبدیل
- • استفاده غیرضروری از will-change
مثال بهینهسازی عملکرد:
.optimized {
will-change: transform;
transform: translateZ(0); /* 3D 가속 */
transition: transform 0.3s ease;
}🎬 انیمیشن و انتقالها
تبدیل را میتوان با انتقال و انیمیشن CSS برای ایجاد افکتهای صاف استفاده کرد.
مثال انتقال
.hover-effect {
transition: transform 0.3s ease;
}
.hover-effect:hover {
transform: scale(1.1) rotate(5deg);
}مثال انیمیشن کیفریم
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.bounce { animation: bounce 1s infinite; }🌐 سازگاری مرورگر
تبدیل CSS در همه مرورگرهای مدرن پشتیبانی میشود، اما ممکن است برای مرورگرهای قدیمیتر به پیشوندهای فروشنده نیاز باشد.
مثال پیشوند فروشنده:
-webkit-transform: rotate(45deg); /* Safari, Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-ms-transform: rotate(45deg); /* IE 9 */
transform: rotate(45deg); /* 표준 */🎯 مثالهای استفاده در دنیای واقعی
افکت شناور کارت
.card {
transition: transform 0.3s ease;
cursor: pointer;
}
.card:hover {
transform: translateY(-10px) scale(1.02);
}اسپینر بارگیری
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner {
animation: spin 1s linear infinite;
}افکت ورود مودال
.modal {
transform: scale(0) rotate(180deg);
transition: transform 0.3s ease;
}
.modal.show {
transform: scale(1) rotate(0deg);
}افکت کلیک دکمه
.button {
transition: transform 0.1s ease;
}
.button:active {
transform: scale(0.95);
}🔧 ابزارهای اشکالزدایی و توسعه
ابزارهای توسعهدهنده مرورگر
- • ویرایش در زمان واقعی در پنل Elements
- • بررسی مقادیر نهایی در تب Computed
- • تحلیل عملکرد با تب Performance
- • بررسی ساختار لایه با نمای سه بعدی
ویژگیهای مفید CSS
- •
transform-style: preserve-3d - •
perspective: 1000px - •
backface-visibility: hidden - •
will-change: transform
💡 نکات حرفهای
نکته عملکرد
استفاده از transform3d() یا translateZ(0) برای ایجاد لایههای ترکیبی برای شتابدهی GPU میتواند عملکرد انیمیشن را به طور قابل توجهی بهبود بخشد.
نکته دسترسیپذیری
از مدیا کوئری prefers-reduced-motion برای ارائه جایگزین برای کاربران حساس به حرکت استفاده کنید.
نکته طراحی
تنظیم صحیح transform-origin میتواند افکتهای تبدیل طبیعیتری ایجاد کند.
نکته توسعه
استفاده از متغیرهای CSS برای کنترل پویا مقادیر تبدیل، ادغام جاوا اسکریپت را آسانتر میکند.