سلام دوستان عزیز ، امیدوارم که شاد باشید ، درمورد css کمی بیاموزیم.
CSS3 به شما امکان می دهد به المان های خود جلوه ی سه بعدی اعمال کنید (آن ها را به صورت سه بعدی قالب دهی کنید).
مرورگرهای زیر با ذکر ویرایشی که از این خاصیت پشتیبانی می کنند در جدول زیر ارائه گردیده:
خاصیت
IE
Chrome
Firefox
Safari
Opera
transform
۱۰٫۰
۳۶٫۰
۱۲٫۰ -webkit-
۱۶٫۰
۱۰٫۰ -moz-
۴٫۰ -webkit-
۲۳٫۰
۱۵٫۰ -webkit-
transform-origin
(three-value syntax)
۱۰٫۰
۳۶٫۰
۱۲٫۰ -webkit-
۱۶٫۰
۱۰٫۰ -moz-
۴٫۰ -webkit-
۲۳٫۰
۱۵٫۰ -webkit-
transform-style
۱۱٫۰
۳۶٫۰
۱۲٫۰ -webkit-
۱۶٫۰
۱۰٫۰ -moz-
۴٫۰ -webkit-
۲۳٫۰
۱۵٫۰ -webkit-
perspective
۱۰٫۰
۳۶٫۰
۱۲٫۰ -webkit-
۱۶٫۰
۱۰٫۰ -moz-
۴٫۰ -webkit-
۲۳٫۰
۱۵٫۰ -webkit-
perspective-origin
۱۰٫۰
۳۶٫۰
۱۲٫۰ -webkit-
۱۶٫۰
۱۰٫۰ -moz-
۴٫۰ -webkit-
۲۳٫۰
۱۵٫۰ -webkit-
backface-visibility
۱۰٫۰
۳۶٫۰
۱۲٫۰ -webkit-
۱۶٫۰
۱۰٫۰ -moz-
۴٫۰ -webkit-
۲۳٫۰
۱۵٫۰ -webkit-
توابع تبدیل سه بعدی 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);
}
خاصیت های transform CSS3:
جدول زیر کلیه ی خاصیت های مربوط به transform در CSS3 را فهرست می کند:
خاصیت
شرح
transform
جلوه ی دو بعدی و سه بعدی به عنصر مربوطه اعمال می کند
transform-origin
به شما اجازه می دهد تا موقعیت عنصر تبدیل شده را تغییر دهید
transform-style
تعیین می کند چگونه المان های تودرتو (nested) در فضای سه بعدی پردازش و نمایش داده شود
perspective
نحوه نمایش عناصر سه بعدی را مشخص می کند. (دور نما)
perspective-origin
تعریف کننده ی محل قرار گیری المان سه بعدی از پایین.
backface-visibility
هنگامی را در اثر چرخش، پشت عنصر نمایان می شود (جلوی آن نمایان نیست)، تعیین می کند که المان نمایش داده شود یا خیر
توابع تبدیل سه بعدی در CSS3:
تابع
توصیف
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
کلیه ی تبدیل های سه بعدی را دربر می گیرد
translate3d(x,y,z)
انتقال (حرکت) سه بعدی عنصر را مقدار دهی می کند
translateX(x)
یک انتقال سه بعدی را تعریف کرده و فقط مقدار محور 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)
چرخش سه بعدی را تعریف می کند
rotateX(angle)
چرخش عنصر را در امتداد محور X تعریف می کند
rotateY(angle)
چرخش سه بعدی در طول محور Y تعریف می کند
rotateZ(angle)
یک چرخش سه بعدی در امتداد محور Z تعریف می کند
perspective(n)
یک دورنمای سه بعدی (perspective) برای المان تبدیل شده تعریف می کند
