سه بعدی و CSS

Paul Kinlan

مقدمه

برای مدت طولانی 3 بعدی محفوظ برنامه های دسکتاپ بوده است. اخیراً با معرفی تلفن های هوشمند پیشرفته که به شتاب پردازنده گرافیکی بومی دسترسی دارند، تقریباً در همه جا شاهد استفاده از سه بعدی هستیم.

معمولاً سه بعدی عمدتاً به عنوان وسیله ای برای بازی یا برخی از رابط های کاربری پیشرفته استفاده می شود. تا زمانی که تبدیل پرسپکتیو در WPF و Silverlight معرفی شد که یک مدل مناسب برای اعمال افکت‌های سه‌بعدی بر روی عناصر رابط کاربری به یک راه‌حل عملی برای توسعه‌دهندگان برنامه تبدیل شد (بعد از همه، سه بعدی دقیقاً آسان نیست).

CSS 3D Transform Model به عنوان یک مشخصات پیش نویس در مارس 2009 معرفی شد تا به توسعه دهندگان وب اجازه دهد تا رابط های کاربری جالب و قانع کننده ای ایجاد کنند که از مزایای سه بعدی استفاده می کند و به نویسندگان برنامه اجازه می دهد تا تغییرات چشم انداز سه بعدی را برای هر عنصر DOM بصری اعمال کنند.

CSS 3D Transformation Working Draft یک بسط منطقی برای CSS 2D Transformation Model است که برخی ویژگی های اضافی از جمله: پرسپکتیو، چرخش و تبدیل در فضای سه بعدی را معرفی می کند.

هرگز قبلاً نتوانسته ایم رابط های سه بعدی را به این راحتی بسازیم. این فناوری ها مانع ورود را کاهش داده اند. دیگر لازم نیست برای ساختن المان‌های سه‌بعدی، یک مهارت ریاضی باشید.

لازم به ذکر است که ماژول CSS 3D برای کمک به توسعه دهندگان در ساخت برنامه های کاربردی غنی و جذاب طراحی شده است، این ماژول به گونه ای طراحی نشده است که شما را قادر به ساخت جهان های سه بعدی فراگیر کند.

پشتیبانی مرورگر و شتاب سخت افزاری

-وبکیت-چشم انداز

-webkit-transform-3d

اطلاعات مهمی که باید به خاطر بسپارید این است که اگرچه یک مرورگر ممکن است از سه بعدی "پشتیبانی" کند، ممکن است به دلیل محدودیت های سخت افزاری و درایور نتواند سه بعدی را ارائه دهد. صحنه های سه بعدی مبتنی بر DOM می تواند از نظر محاسباتی بسیار گران باشد و بنابراین فروشندگان مرورگر تصمیم گرفته اند به جای کاهش سرعت مرورگرها با یک راه حل رندر نرم افزاری خالص، از GPU استفاده کنند که ممکن است در همه پلتفرم ها در دسترس نباشد.

تشخیص ویژگی

در مورد تشخیص ویژگی چطور؟ امیدوار بودم که نپرسی! توسعه دهندگان از ابزارهایی مانند Modernizr برای شناسایی پشتیبانی از ویژگی ها و توانایی های خاص مرورگر استفاده می کنند. در حالی که تشخیص وجود پشتیبانی برای تبدیل های سه بعدی امکان پذیر است، تشخیص وجود شتاب سخت افزاری امکان پذیر نیست و شتاب سخت افزاری عنصر اصلی است.

نمونه پایه

هیچ چیز بهتر از پریدن مستقیم به داخل نیست. در این نمونه ما یک مجموعه اولیه از چرخش های یک عنصر DOM دلخواه را اعمال خواهیم کرد.

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

<div style="-webkit-perspective: 800; perspective: 800; margin: 100px 0 0 50px">

پرسپکتیو مهم است زیرا نحوه نمایش عمق صحنه سه بعدی را مشخص می کند، مقادیر 1-1000 جلوه بسیار برجسته ای ایجاد می کنند و مقادیر بیش از 1000 کمتر از آن. سپس یک iframe اضافه می کنیم و یک چرخش 30 درجه حول محور Z و Y اعمال می کنیم

<iframe
    src="http://www.html5rocks.com/"
    style="-webkit-transform: rotate3d(0, 1, 1, 30deg)"></iframe>

بام! این همان است، عنصر کاملاً تعاملی است، و از همه جهات یک عنصر DOM کامل است (به جز اینکه اکنون حتی سردتر به نظر می رسد). اگر مرورگر شما از تبدیل های سه بعدی پشتیبانی نکند، هیچ اتفاقی نمی افتد. شما فقط یک iframe ساده و بدون چرخش را مشاهده خواهید کرد. اگر مرورگر شما از تبدیل های سه بعدی اما بدون شتاب سخت افزاری پشتیبانی می کند، ممکن است کمی عجیب به نظر برسد.

متحرک سازی

چیزی که من در مورد تبدیل های سه بعدی CSS3 دوست دارم این است که به زیبایی با ماژول CSS Transition پیوند می خورد. تعریف انیمیشن‌ها و انتقال‌ها در CSS آسان است و استفاده از آن‌ها در سه بعدی نیز از این قاعده مستثنی نیست.

متحرک سازی عناصری که دارای پرسپکتیو سه بعدی هستند کار آسانی است. به سادگی سبک "Transition" را روی "تبدیل" تنظیم کنید، یک مدت زمان و یک تابع انیمیشن را اضافه کنید. از آن به بعد، هر تغییری در سبک «تبدیل» متحرک خواهد شد.

مثال‌های قبلی را برای استفاده از سبک‌های سند، به جای سبک‌های درون خطی، دوباره فاکتور گرفته‌ایم. نه تنها مثال را پاک می کند، بلکه به نمونه اجازه می دهد تا از انتخابگر شبه :hover استفاده کند. با استفاده از انتخابگر :hover ، انتقال ها را می توان با حرکت دادن ماوس بر روی عنصر آغاز کرد. عالی!

خلاصه

این فقط یک نگاه سریع به برخی از جلوه‌های جالبی بود که می‌توان روی هر عنصر DOM قابل مشاهده با استفاده از تبدیل‌های سه بعدی CSS اعمال کرد. هنوز کارهای زیادی می توان انجام داد که در این آموزش به آنها پرداخته نشده است.