%50 تخفیف، با کد Ramazan روی تمام آموزش ها، بمناسبت ماه مبارک رمضان
زمان باقی مانده (آخرین فرصت)

تبدیل سه بعدی در CSS3

تبدیل سه بعدی یا (3D transforms) در CSS3

Wiki

با استفاده از تبدیل سه بعدی می توانید به عناصر جلوه سه بعدی اضافه کنید.

در این مطلب، دو متد زیر را فرا خواهید گرفت:

  • ()rotateX
  • ()rotateY

برای مشاهده تفاوت بین تبدیل دو بعدی و سه بعدی، روی عناصر زیر کلیک نمایید:

چرخش
دو بعدی
چرخش
سه بعدی

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

Wiki

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

مرورگرهای Internet Explorer 10 و Firefox تبدیل سه بعدی را پشتیبانی می کنند.

مرورگرهای Chrome و Safari به پشوند -webkit- نیاز دارند.

مرورگر Opera تبدیل سه بعدی را پشتیبانی نمی کند. (تنها تبدیل دو بعدی  را پشتیبانی می کند)


متد ()rotateX در CSS3

Wiki

Rotate X

با استفاده از متد ()rotateX، می توان عنصر را با گرفتن یک درجه، حول محور X چرخاند.

مثال (تبدیل سه بعدی در CSS3)

div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
}
خودتان امتحان کنید »

متد ()rotateY در CSS3

Wiki

Rotate Y

با استفاده از متد ()rotateY، می توان عنصر را با گرفتن یک درجه، حول محور Y چرخاند.

مثال (تبدیل سه بعدی در CSS3)

div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari and Chrome */
}
خودتان امتحان کنید »

خاصیت های تبدیل در CSS3

Wiki

در جدول زیر، لیست تمام خاصیت های تبدیل، آورده شده است:

خاصیتتوضیحاتCSS
transformبرای اعمال یک تبدیل دو بعدی یا سه بعدی روی یک عنصر بکار می رود.3
transform-originبه شما اجازه می دهد تا مکان عنصر تبدیل شده را تغییر دهید.3
transform-styleنحوه ی عمل عناصر تودرتو در فضاهای سه بعدی را مشخص می کند.3
perspectiveنحوه نمایش عناصر سه بعدی را مشخص می کند.(دور نما)3
perspective-originمشخص کننده محل قرار گیری عنصر سه بعدی از پایین.3
backface-visibilityزمانی که در اثر چرخش، پشت عنصر نمایان می شود، مشخص می کند که عنصر نمایش داده شود یا خیر.3

متدهای تبدیل سه بعدی

Wiki

متدتوضیحات
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)تمامی تبدیل های سه بعدی را دربردارد.
translate3d(x,y,z)یک حرکت سه بعدی، تعریف می کند.
translateX(x)یک حرکت سه بعدی، در جهت محور X تعریف می کند.
translateY(y)یک حرکت سه بعدی، در جهت محور Y تعریف می کند.
translateZ(z)یک حرکت سه بعدی، در جهت محور Z تعریف می کند.
scale3d(x,y,z)یک تغییر اندازه سه بعدی، تعریف می کند.
scaleX(x)یک تغییر اندازه سه بعدی، در جهت محور X تعریف می کند.
scaleY(y)یک تغییر اندازه سه بعدی، در جهت محور Y تعریف می کند.
scaleZ(z)یک تغییر اندازه سه بعدی، در جهت محور Z تعریف می کند.
rotate3d(x,y,z,angle)یک چرخش سه بعدی، تعریف می کند. (angle: زاویه چرخش)
rotateX(angle)یک چرخش سه بعدی، حول محور X تعریف می کند.
rotateY(angle)یک چرخش سه بعدی، حول محور Y تعریف می کند.
rotateZ(angle)یک چرخش سه بعدی، حول محور Z تعریف می کند.
perspective(n)یک دورنمای سه بعدی (perspective)، تعریف می کند.

آموزش های مرتبط


آموزش صوتی CSS3

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

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