میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

تبدیل سه بعدی (۳D Transforms) در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی ، امیدوارم که حال همه دوستان خوب باشه. لطفا در ادامه با آموزش تبدیل سه بعدی (۳D Transforms) در CSS با من همراه باشید.

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

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

  • ()rotateX
  • ()rotateY


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

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

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

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


متد ()rotateX در CSS3

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

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

div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
}

 


متد ()rotateY در CSS3

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

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

 

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

 


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

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

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

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

متدتوضیحات
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)، تعریف می کند.

 

 


امیدواریم آموزش تبدیل سه بعدی (۳D Transforms) در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.

 

3D Transforms در CSScssw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfتبدیل سه بعدی (3D Transforms) در CSSتبدیل سه بعدی در CSSدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهساختار دستورات CSSسی اس اسفارسی w3schoolsکتاب آموزش css فارسی
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟