یکی دیگر از ویژگیهایی که به CSS 3 اضافه شده امکان چرخش دادن به اشیا و متون در جهت دلخواه است.
این چرخش با ویژگی جدیدی با نام transform معرفی شده. هنوز این ویژگی نهایی نشده و ممکنه که در آینده تغییراتی در اون به وجود بیاد و زاویه های دیگری غیر از درجه رو هم پشتیبانی کنه، اما فعلا با این تعریف کنونی مرورگرهای Firefox 3.5 ، Chrome و Safari از اون پشتیبانی می کنند.
این ویژگی قدرت عمل زیادی به طراحان وب خواهد داد و با استفاده ترکیبی ازاین ویژگی می توان انیمیشن های مختلفی برای سایت ایجاد کرد.
دستور این ویژگی به این صورت است:
transform: rotate;
که مقدار rotate یا چرخش به صورت rotate(Xdeg) وارد میشه. مانند این نمونه:
transform: rotate(-90deg);
- به کار گیری
همانطور که گفتن این ویژگی در Firefox 3.5 ، Chrome و Safari پستیبانی میشه. کاری شبیه این رو می شه با استفاده از فیلترهای مخصوص IE در آن مرورگر انجام داد.
برای استفاده در Firefox طبق معمول باید پسوند -moz رو به ویژگی اضافه کنید، برای مرورگر Chrome و safari نیز -webkit لازم خواهد بود. مانند زیر:
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
برای مرورگر IE هم از فیلترها برای شبیه سازی عملکردی مانند این استفاده کنید:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
- نمونه های انجام شده
ساعت با جاوا اسکریپت و این ویژگی
نمایش تاریخ میلای در کنار متون
تاریخ میلادی به سبک دیگر (منبع این پست)
نمایش دهنده گالری عکس با ترکیبی از JQuery و این ویژگی(safari)
- مطالب مرتبط
ویژگیهای جدید در CSS 3 بخش اول
ویژگیهای جدید در CSS 3 بخش دوم
راهنمای سریع و مرجع کامل Html و CSS
افزونه فایرفاکس: تشخیص تغییرات DOM و CSS در صفحات وب
پاسخی بگذارید