خواندن ۲ دقیقه·۴ سال پیش

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

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

در CSS3 این امکان برای شما فراهم می شود که به المان های خود جلوه سه بعدی اعمال کنید (آن ها را به صورت سه بعدی قالب دهی کنید).
در جدول زیر، ویرایشی از مرورگرهای مختلف که خاصیت تبدیل سه بعدی را پشتیبانی می کنند، ارائه شده :

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

مبحث پیش رو متدهای تبدیل سه بعدی را در CSS3 برای شما تشریح می کند :

rotateX()
rotateY()
rotateZ()

متد rotateX()

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

div {
-webkit-transform: rotateX(150deg); /* Safari */
transform: rotateX(150deg);
}

متد rotateY()

متد مزبور یک المان را حول محور Y بر اساس درجه ی تعیین شده می چرخاند.

div { 
-webkit-transform: rotateY(130deg); /* Safari */
transform: rotateY(130deg); 
}

متد rotateZ()

تابع مذکور یک المان را حول محور Z آن بر اساس درجه ی معین می چرخاند :

div {
-webkit-transform: rotateZ(90deg); /* Safari */
transform: rotateZ(90deg);
}

https://www.aparat.com/v/4gGj2

خاصیت های transform در CSS3

جدول زیر کلیه ی خاصیت های مربوط به transform در CSS3 را فهرست می کند :

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

https://aparat.com/v/XPKQB

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

تابع (matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n : کلیه تبدیل های سه بعدی را دربر می گیرد.
تابع (translate3d(x,y,z : انتقال (حرکت) سه بعدی عنصر را مقدار دهی می کند.
تابع (translate X(x : یک انتقال سه بعدی را تعریف کرده و فقط مقدار محور X را بکار می برد (حرکت سه بعدی، در جهت محور X تعریف می کند).
تابع (translate Y(y : یک حرکت سه بعدی، در جهت محور Y تعریف می کند.
تابع (translate Z(z : یک حرکت سه بعدی، در جهت محور Z تعریف می کند.
تابع (scale3d(x,y,z : یک تغییر اندازه سه بعدی (مقیاس بندی سه بعدی)، تعریف می کند.
تابع (scale X(x : یک تغییر اندازه سه بعدی، در طول محور X تعریف می کند.
تابع (scale Y(y : یک تغییر اندازه سه بعدی، در امتداد محور Y تعریف می کند.
تابع (scale Z(z : یک تغییر اندازه سه بعدی، در جهت محور Z تعریف می کند.
تابع (rotate3d(x,y,z,angle : چرخش سه بعدی را تعریف می کند.
تابع (rotate X(angle : چرخش عنصر را در امتداد محور X تعریف می کند.
تابع (rotate Y(angle : چرخش سه بعدی در طول محور Y تعریف می کند.
تابع (rotate Z(angle : یک چرخش سه بعدی در امتداد محور Z تعریف می کند.
تابع (perspective (n : یک دورنمای سه بعدی (perspective) برای المان تبدیل شده تعریف می کند.

با دیگر مقاله های مرتبط با آموزش طراحی سایت همراه ما باشید..

آموزش طراحی سایت آموزش css3 تبدیل دو بعدی و سه بعدی در CSS3 دوره آموزش طراحی سایت متد تبدیل سه بعدی در css3

برلیانس

شاید از این پست‌ها خوشتان بیاید