در درس قبل درباره تغییر شکل دوبعدی عناصر در CSS صحبت کردیم و هر آنچه در این زمینه لازم بود، شرح دادیم. امروز با مبحث تغییر شکل سه بعدی عناصر با شما عزیزان هستیم.
زبان CSS به شما اجازه می دهد که با استفاده از قابلیت transformation اشیاء مورد نظرتان را به شکل 3 بعدی تغییر دهید.
وضعیت پشتیبانی از این قابلیت در جدول زیر آمده است. توجه داشته باشید که اعداد این جدول نخستین نسخه ای از آن است که از قابلیت transform پشتیبانی کامل می کند و اعدادی که همراه پسوند هایی مانند -ms- و -webkit- و … هستند نشان دهنده ی اولین نسخه ای از مرورگر هستند که فقط با آن پسوند کار می کند:
| خصوصیت | کروم | edge | فایرفاکس | سافاری | اپرا |
| transform |
36.0 |
10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
| transform-origin (حالتی که سه مقدار می گیرد) | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
| transform-style | 36.0 12.0 -webkit- |
11.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
| perspective | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
| perspective-origin | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
| backface-visibility | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
این متد عنصر مورد نظر ما را روی محور X میچرخاند. به این مثال دقت کنید: