ایجاد ظاهر چرخشی با استفاده از CSS در تصاویر ۳D

یکی از موارد استفاده از ۳D خلق تصاویر سه بعدی است که با مشکلاتی از قبیل ویژگی های هندسی، ایحاد تحرک و ویژگی های پیچیده و متعدد CSS همراه است. این مسائل بسیار آزار دهنده هستند و تلاش بر این است که بتوان آن ها را مورد بررسی قرار داده و راه حلی برای آن ها پیدا کرد.

در این مقاله، تلاش بر این است تا استفاده از CSS در تصاویر ۳D جلوه ای چرخان ایجاد کرد.

مکعب ها دارای ۶ وجه هستند پس ما باید از ۶ المان استفاده کنیم. اینجا برای هر وجه یک تگ div ایجاد می کنیم و هر یک را با عنوان “cube” در یک container (عنصر دربرگیرنده تگ) قرار می دهیم.

استفاده از CSS در تصاویر 3D

برای ایجاد پرسپکتیو باید تمام تگ های بالا را در Container نامرئی دیگری نیز قرار دهیم. همانطور که در تصویر پایین می بینید این container  بعنوان یک بخش (section) تعریف می شود چراکه نیازی نیست همیشه از تگ div استفاده کنیم.

استفاده از CSS در تصاویر 3D

برای ساختن یک مکعب هر وجه را چرخانده و تغییر مکان می دهیم. در تصویر زیر توجه کنید که چگونه هر یک از وجوه را برای قرار دادن در جهت درست خود، می‌چرخانیم. در مرحله بعد، برای تغییر مکان آن ها از کد translate استفاده کرده و امکان جابه جایی را فراهم می کنیم.

استفاده از CSS در تصاویر 3D

برای افزودن رنگ، بهتر است از کد دستوری hsla استفاده کنیم چراکه به کمک آن می‌توان توالی زیبا و چشمگیری از سایه‌ها و رنگ‌ها را ایجاد کرده، درنهایت آن‌ها را کپی و ویرایش نمود.

استفاده از CSS در تصاویر 3D

 تا اینجا مکعبی داریم که اندازه آن مشخص نیست. این کار را می‌توان از طریق تنظیمات اندازه در container، تگ div مکعب و وجوه آن انجام داد.

استفاده از CSS در تصاویر 3D

 برای حصول اطمینان از کارکرد صحیح ۳D باید تنظیمات تبدیل را بدرستی انجام داد و این امر از اهمیت بالایی برخوردار است.

استفاده از CSS در تصاویر 3D

 اکنون زمان تنظیم پرسپکتیو فرا رسیده است. چنانچه بخواهیم یک عکس را متناسب با اصل آن حرکت دهیم، باید پرسپکتیو را برای تنظیم حاشیه تصویر در تمامی وجوه مورد بررسی قرار دهیم.

استفاده از CSS در تصاویر 3D

 در این مرحله می خواهیم مکعب با قرار گرفتن موس روی آن بچرخد. در نتیجه باید حالت معلق ماندن را بوسیله چرخش ۳D اضافه کنیم. چرخش خودکار مکعب تمامی وجوه آن را می چرخاند.

استفاده از CSS در تصاویر 3D

 با انجام این دستورات و اعمال کدهای بالا، می توان با استفاده از CSS در تصاویر ۳D حالت چرخشی را ایجاد کرد.

منبع : www.webdesignermag.co.uk

طراحان
طراحان
گروه طراحان دپارتمان طراحی وب‌سایت است که فعالیت خود را از سال ۸۴ آغاز نموده. طراحان کلیه نیاز‌های شما را در راه اندازی، نگهداری و مدیریت انواع وب‌سایت‌های اینترنتی، فروشگاه‌های اینترنتی، سایت‌های خبری، پرتال‌های سازمانی، سایت‌های ویژه مشاورین املاک، سایت‌های ویژه آژانس‌های مسافرتی و رزرو و ... به‌صورت حرفه‌ای و کاربردی برطرف می‌نماید.