انتخاب رنگ سبز انتخاب رنگ آبی انتخاب رنگ قرمز

3D Transfrom یا تبدیل سه بعدی در CSS

3D Transfroms

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

  • rotateX()
  • rotateY()

با کلیک روی دو دکمه زیر تفاوت بین تبدیل دو بعدی و سه بعدی را مشاهده میکنید .
چرخش
دو بعدی
چرخش
سه بعدی

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

اینترنت اکسپلورر و اوپرا هنوز از تبدیل سه بعدی پشتیبانی نمیکنند ( آن ها فقط تبدیل دو بعدی را پشتیبانی میکنند ).
فایرفاکس برای این ویژگی نیاز به پیشوند -moz- دارد .
کروم و سافاری برای این ویژگی نیاز به پیشوند -webkit- دارند.
متد rotateX()

Rotate X

با متد rotateX() المنت با گرفتن درجه حول محور X می چرخد.

نمونه (rotateX())
Internet ExplorerFirefoxChromeSafariOpera
div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
-moz-transform: rotateX(120deg); /* Firefox */
}
متد rotateY()

Rotate Y

با متد rotateY() المنت با گرفتن درجه حول محور Y می چرخد.

نمونه (rotateY())
Internet ExplorerFirefoxChromeSafariOpera
div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari and Chrome */
-moz-transform: rotateY(130deg); /* Firefox */
}
شرح دادن ویژگی های فوق

برای دیدن صفحه مخصوص هر یک از ویژگی های فوق روی نام آن ها کلیک کنید :

وی بی ایران در Facebook

صفحه رسمی وی بی ایران در فیس بوک قصد دارد تا بهترین مطالب را به Stream شما ارسال کند . اگر میخواهید :
  • استایل های جدید
  • هک های جدید
  • مقاله های محبوب
  • خبر های جدید ویبولتین
  • و ..
برای شما ارسال شود ، هم اکنون پیج ما را لایک کنید .
برای ورود به صفحه رسمی وی بی ایران روی آیکن فیس بوک کلیک کنید .