2019 September 20 - جمعه 29 شهرويور 1398
آموزش Css3 – قسمت هفتم – ۳D Transforms
کد خبر: ١٩٣٧ تاریخ انتشار: ١٧ بهمن ١٣٩١ - ١٩:١٢ تعداد بازدید: 1257
آموزش Css3 – قسمت هفتم – ۳D Transforms

سلام
امروز راجع به امکانات سه بعدی سی اس اس ۳ می خواهم برای شما بگویم.
در این مقاله راجع به دو تابع rotatex و rotatey صحبت خواهم کرد.

سلام

امروز راجع به امکانات سه بعدی سی اس اس ۳ می خواهم برای شما بگویم.

در این مقاله راجع به دو تابع rotatex و rotatey صحبت خواهم کرد.

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

مرورگرهای IE و Opera توابع سه بعدی را پشتیبانی نمی کنند و فقط از حالت ۲ بعدی پشتیبانی می کنند.

مرورگر Firefox با پیشوند -moz- پشتیبانی می کند.

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

تابع rotateX

با استفاده از تابع rotatex ما می توانیم جزء انتخابی را در زاویه X به اندازه دلخواه بچرخانیم.

مثال ۱ :

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

در مثال بالا تگ div 120 درجه می چرخد.

تابع rotateY

با استفاده از تابع rotateY ما می توانیم جزء انتخابی را در زاویه Y به اندازه دلخواه بچرخانیم.

مثال ۲ :

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

در مثال بالا تگ div را به انداز ۱۳۰ درجه در زاویه Y می چرخانیم.

موفق باشید



Share
* نام:
ایمیل:
* نظر:

آخرین مطالب


صفحه اصلی | تماس با ما | درباره ما | آرشیو | پیوندها | RSS
طراحی و تولید: مؤسسه احرار اندیشه