سبد (0)

تبدیل سه بعدی در 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 مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه