خصوصیت transform
مثال (خصوصیت transform)
چرخاندن یک عنصر div:
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
پشتیبانی مرورگرها
مرورگرهای Internet Explorer 10، Firefox و Opera، خصوصیت transform را پشتیبانی می کنند.
Internet Explorer 9 از خصوصیت جایگزین ms-trsnsform- (تنها تبدیل دو بعدی) استفاده می کند.
Safari و Chrome از خصوصیت جایگزین webkit-transform- (تبدیل سه بعدی و دو بعدی) استفاده می کنند.
مرورگر Opera تنها انتقال دو بعدی را پشتیبانی می کند.
تعریف و کاربرد
با استفاده از خصوصیت transform می توان تبدیل دوبعدی و سه بعدی را به یک عنصر اعمال کرد. این خصوصیت اجازه می دهد تا عناصر را بچرخایند، عناصر را کج کنید، مقیاس عناصر را افزایش و یا کاهش دهید، عناصر را حرکت دهید.
برای درک بهتر مفهوم تبدیل به view a demo مراجعه فرمایید.
| مقدار پیشفرض | none |
|---|---|
| ارث بری | خیر |
| نسخه | CSS3 |
| JavaScript ساختار | object.style.transform="rotate(7deg)" |
نحوه استفاده
| مقدار | توضیحات | نمایش دادن |
|---|---|---|
| none |
مشخص می کند که هیچ تبدیلی صورت نمی گیرد |
نمایش دادن » |
| matrix(n,n,n,n,n,n) |
تبدیل دو بعدی را با استفاده از ماتریسی متشکل از 6 مقدار تعیین می کند. |
نمایش دادن » |
| matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,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) |
به عنصر یک دور نمای سه بعدی می دهد. |
مثال - خودتان امتحان کنید
Images thrown on the table
در این مثال نحوه نمایش یک تصویر پلوراید و چرخش آن نمایش داده شده است.
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 9081
