ویژگی transform Style
- صفحه قبلی top
- صفحه بعدی transformOrigin
- برگشت به لایه بالاتر موضوع Style HTML DOM
تعریف و استفاده
transform ویژگی به استفاده از تبدیلات 2D یا 3D در عناصر اختصاص داده می‌شود. این ویژگی به شما اجازه می‌دهد تا عناصر را بچرخانید، بزرگ‌کنید، کوچک‌کنید، حرکت دهید و کج کنید و غیره.
لطفاً به:
دستورالعمل CSS:ویژگی transform
مثال
گردش دادن عنصر div:
document.getElementById("myDIV").style.transform = "rotate(7deg)";
نحوه نوشتن
بازگشت ویژگی transform:
object.style.transform
تنظیم ویژگی transform:
object.style.transform = "none|transform-functions|initial|inherit"
مقدار ویژگی
| مقدار | توضیح |
|---|---|
| none | تغییر شکل را تعریف می‌کند که نباید تغییر کند. |
| matrix(n, n, n, n, n, n) | با استفاده از ماتریس با شش مقدار، تغییر شکل دو بعدی را تعریف می‌کند. |
| matrix3d(n, n, n, n, و غیره...) | با استفاده از ماتریس 4x4 با 16 مقدار، تغییر شکل سه بعدی را تعریف می‌کند. |
| translate(x, y) | تغییر شکل انتقال دو بعدی را تعریف می‌کند. |
| translate3d(x, y, z) | تغییر شکل انتقال سه بعدی را تعریف می‌کند. |
| translateX(x) | تغییر شکل انتقال را تعریف می‌کند، تنها از مقدار محور X استفاده می‌کند. |
| translateY(y) | تغییر شکل انتقال را تعریف می‌کند، تنها از مقدار محور Y استفاده می‌کند. |
| translateZ(z) | تغییر شکل سه بعدی را تعریف می‌کند، تنها از مقدار محور Z استفاده می‌کند. |
| scale(x, y) | تغییر شکل مقیاس دو بعدی را تعریف می‌کند |
| scale3d(x, y, z) | تغییر شکل مقیاس سه بعدی را تعریف می‌کند. |
| scaleX(x) | با دادن یک مقدار به محور X، تغییر شکل مقیاس را تعریف می‌کند. |
| scaleY(y) | با دادن یک مقدار به محور Y، تغییر شکل مقیاس را تعریف می‌کند. |
| scaleZ(z) | با دادن یک مقدار به محور Z، تغییر شکل مقیاس سه بعدی را تعریف می‌کند. |
| rotate(angle) | تعریف چرخش دو بعدی، با تعیین زاویه در پارامترها. |
| rotate3d(x, y, z, angle) | تعریف چرخش سه بعدی. |
| rotateX(angle) | تعریف چرخش سه بعدی در محور X. |
| rotateY(angle) | تعریف چرخش سه بعدی در محور Y. |
| rotateZ(angle) | تعریف چرخش سه بعدی در محور Z. |
| skew(x-angle, y-angle) | تعریف تغییر شکل مایل دو بعدی در محور X و Y. |
| skewX(angle) | تعریف تغییر شکل مایل دو بعدی در محور X. |
| skewY(angle) | تعریف تغییر شکل مایل دو بعدی در محور Y. |
| perspective(n) | تعریف دیدگاه عمودی برای عنصر تغییر شکل 3D. |
| initial | این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. لطفاً به initial. |
| inherit | این ویژگی را از عنصر والد خود ارث می‌برد. لطفاً به inherit. |
جزئیات فنی
| مقدار پیش‌فرض: | بدون |
|---|---|
| مقدار بازگشتی: | رشته‌ای که بیان‌گر ویژگی transform. |
| نسخه CSS: | CSS3 |
پشتیبانی مرورگر
اعداد در این جدول نشان‌دهنده نسخه‌ای از مرورگرها هستند که اولین بار این ویژگی را کامل پشتیبانی می‌کنند.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 36.0 | 10.0 | 16.0 | 9.0 | 23.0 |
- صفحه قبلی top
- صفحه بعدی transformOrigin
- برگشت به لایه بالاتر موضوع Style HTML DOM
