آموزش طراحی سایت (HTML CSS Javascript) | آتریا

خصوصیت transform

مثال (خصوصیت 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)	به عنصر یک دور نمای سه بعدی می دهد.