CSS transform کا ٹرانسفارم

تعریف و استفاده

ویژگی تبدیل به عناصر 2D یا 3D تبدیل اعمال می‌کند. این ویژگی به ما اجازه می‌دهد که عناصر را بچرخانیم، بزرگ‌تر یا کوچکتر کنیم، حرکت دهیم یا کج کنیم.

برای درک بهتر ویژگی تبدیل، لطفاً این را ببینیدنمایش.

لطفاً به:

آموزش CSS3:CSS3 2D تبدیلی

آموزش CSS3:CSS3 3D تبدیلی

دستورالعمل HTML DOM:ویژگی تبدیل

مثال

تغییر div عناصر:

div
{
transform:rotate(7deg);
}

آزمایش کنید

مثال‌های بیشتری در پایین صفحه وجود دارد.

نحوه استفاده CSS

transform: none|functions تبدیل;

مقدار ویژگی

مقدار توضیحات آزمایش
هیچ‌یک تعریف تبدیل بدون تغییر. آزمایش
matrix(n,n,n,n,n,n) تعریف تبدیل 2D، از طریق استفاده از ماتریس با شش عدد. آزمایش
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) تعریف تبدیل 3D، از طریق استفاده از ماتریس 4x4 با 16 عدد.
translate(x,y) تعریف تبدیل 2D. آزمایش
translate3d(x,y,z) تعریف تبدیل 3D.
translateX(x) تعریف تبدیل، فقط با مقدار محور X. آزمایش
translateY(y) تعریف تبدیل، فقط با مقدار محور Y. آزمایش
translateZ(z) تعریف تبدیل 3D، فقط با مقدار محور Z.
scale(x,y) تعریف تبدیل بزرگ‌کنی 2D. آزمایش
scale3d(x,y,z) تعریف تبدیل بزرگ‌کنی 3D.
scaleX(x) با تنظیم مقدار محور X، تبدیل بزرگ‌کنی را تعریف می‌کند. آزمایش
scaleY(y) با تنظیم مقدار محور Y، تبدیل بزرگ‌کنی را تعریف می‌کند. آزمایش
scaleZ(z) با تنظیم مقدار محور Z، تبدیل چرخش 3D را تعریف می‌کند.
rotate(angle) تعریف چرخش 2D، در پارامترها زاویه را مشخص می‌کند. آزمایش
rotate3d(x,y,z,angle) تعریف چرخش 3D.
rotateX(angle) تعریف چرخش 3D در طول محور X. آزمایش
rotateY(angle) تعریف چرخش 3D در طول محور Y. آزمایش
rotateZ(angle) تعریف چرخش 3D در طول محور Z. آزمایش
skew(x-angle,y-angle) تعریف تبدیل چرخش 2D در طول محور X و Y. آزمایش
skewX(angle) تعریف تبدیل چرخش 2D در طول محور X. آزمایش
skewY(angle) تعریف تبدیل چرخش 2D در طول محور Y. آزمایش
perspective(n) تعریف دیدگاه نما برای عناصر تبدیل 3D. آزمایش

جزئیات فنی

مقدار پیش‌فرض: هیچ‌یک
ارث: خیر
نسخه: CSS3
نوع جاوااسکریپت: عنصر.style.transform="rotate(7deg)"

مثال‌های بیشتر

تصویری که روی میز می‌اندازند
این مثال نحوه ایجاد تصویر پولاریو و چرخش تصویر را نشان می‌دهد.

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهایی هستند که این ویژگی را به طور کامل پشتیبانی می‌کنند.

اعداد با -webkit-، -moz- یا -ms- نشان‌دهنده نسخه اولیه استفاده از پیشوند هستند.

ویژگی چروم آئی ای / ایج فائرفاکس سافری اوپرا
transform (2D) 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
10.5 -o-
transform (3D) 36.0
12.0 -webkit-		 12.0 10.0 9.0
4.0 -webkit-		 23.0
15.0 -webkit-