تخفیف ویژه ماه محرم، فرصت یادگیری با 35٪ تخفیف (کد تخفیف: moharam)
زمان باقی مانده

 السّلام علیک یا اباعبداللّه الحسین

سبد (0)

تبلیغات

خصوصیت transform

مثال (خصوصیت transform)

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

div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
خودتان امتحان کنید »

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

Internet Explorer Firefox Opera Google Chrome Safari

مرورگرهای 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)

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

 

مثالs

مثال - خودتان امتحان کنید

Images thrown on the table
در این مثال نحوه نمایش یک تصویر پلوراید و چرخش آن نمایش داده شده است.

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی