چرخش متون و اشیای صفحه با CSS 3

10 08 2009

یکی دیگر از ویژگیهایی که به 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 در صفحات وب


کارها

Information

پاسخی بگذارید

در پایین مشخصات خود را پر کنید یا برای ورود روی شمایل‌ها کلیک نمایید:

نشان‌وارهٔ وردپرس.کام

شما در حال بیان دیدگاه با حساب کاربری WordPress.com خود هستید. بیرون رفتن / تغییر دادن )

تصویر توییتر

شما در حال بیان دیدگاه با حساب کاربری Twitter خود هستید. بیرون رفتن / تغییر دادن )

عکس فیسبوک

شما در حال بیان دیدگاه با حساب کاربری Facebook خود هستید. بیرون رفتن / تغییر دادن )

عکس گوگل+

شما در حال بیان دیدگاه با حساب کاربری Google+ خود هستید. بیرون رفتن / تغییر دادن )

درحال اتصال به %s




%d وب‌نوشت‌نویس این را دوست دارند: