ویژگی transform CSS

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

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

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

لطفاً به:

آموزش CSS3:تغییرات 2D CSS3

آموزش CSS3:تغییرات 3D CSS3

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

مثال

تغییرات دوران div:

div
{
transform:rotate(7deg);
}

آزمایش کنید

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

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

transform: none|transform-functions;

مقدار ویژگی

مقدار توضیح آزمایش
none تعریف تبدیل بدون تغییر. آزمایش
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. آزمایش

جزئیات فنی

مقدار پیش‌فرض: none
erbتیاب: no
نسخه: CSS3
جمله‌بندی جاوااسکریپت: object.style.transform="rotate(7deg)"

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

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

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

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

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

ویژگی Chrome IE / Edge Firefox Safari Opera
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-