خصوصیت transform

مثال

چرخاندن یک عنصر div:

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)"

نحوه استفاده

transform: none|transform-functions;
مقدار توضیحات نمایش دادن
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)

به عنصر یک دور نمای سه بعدی می دهد.