یک کارت ساده به صورت سهبعدی بسازید که با قرار گرفتن نشانگر ماوس روی آن حول محور Y بچرخد و از خاصیت CSS perspective برای ایجاد عمق استفاده کند.
5.0 بازدید آخرین ویرایش در 220 روز قبل ساعت 02:14 0.0
برای حل این تمرین یک عنصر والد (container) با خصوصیت CSS perspective (مثلاً perspective: 800px) تعریف کنید و کارت را بهعنوان فرزند داخل آن قرار دهید. روی کارت از transform-style: preserve-3d و transition برای انیمیشن نرم استفاده کنید و در حالت hover آن را با transform: rotateY(180deg) بچرخانید؛ هر رویه (front/back) را با position: absolute و backface-visibility: hidden تنظیم کنید تا پشت کارت مخفی بماند. نکات: مقدار perspective روی والد اعمال میشود، از perspective-origin برای تغییر نقطه گریز استفاده کنید و در صورت نیاز برای سازگاری مرورگرها از پیشوندهای CSS بهره ببرید.
توسط پژوهشگر در 220 روز قبل ساعت 02:14 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
برای کار با نمایش سهبعدی، پیشنهاد میکنم از perspective روی یک والد و transform-style: preserve-3d روی کارت استفاده کنید تا عمق بهطور واقعی احساس شود. همچنین میتوانید با استفاده از perspective-origin نقطه گریز را مطابق نیاز تغییر دهید (مثلاً 0 50% یا 25% 50%). برای پشتیبانی مرورگرهای قدیمیتر، پیشوندهای -webkit- و -moz- را برای perspective و transform لحاظ کنید و backface-visibility: hidden را روی هر رویه اعمال کنید تا پشت کارت دیده نشود. استفاده از transition روی transform باعث انیمیشن نرم میشود و مطمئن شوید که هر رویه با position: absolute و اندازه ثابت تعریف شده است.
گزارش