یک کارت دوطرفه با HTML و CSS بسازید که هنگام قرار گرفتن نشانگر ماوس روی آن با استفاده از transform سهبعدی حول محور Y بهصورت فلپ بچرخد تا روی پشت کارت محتوای دیگری نمایش داده شود.
17.0 بازدید آخرین ویرایش در 198 روز قبل ساعت 02:48 0.0
برای حل، از HTML ساده برای ساخت ساختار کارت (container → inner → front و back) و از CSS برای اعمال perspective روی والد، transform-style: preserve-3d و transition روی عنصر درونی استفاده کنید؛ نمای پشت را با transform: rotateY(180deg) بچرخانید و برای هر دو طرف backface-visibility: hidden بگذارید. نکات: اندازه کارت ثابت تعیین کنید، موقعیت front/back را absolute تنظیم کنید و در حالت :hover روی wrapper مقدار rotateY را تغییر دهید تا انیمیشن فلپ سهبعدی انجام شود؛ فقط با HTML و CSS پیادهسازی کنید.
توسط پژوهشگر در 198 روز قبل ساعت 02:48 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
برای بهبود عملکرد و روانی انیمیشن از will-change: transform و در صورت لزوم translateZ(0) استفاده کنید و پیشوندهای -webkit- را فراموش نکنید تا در Safari/مرورگرهای قدیمی رفتار مشابهی داشته باشد. دسترسی را در نظر بگیرید: فلپ را علاوه بر :hover با :focus و کلیدهای صفحهکلید قابل فعالسازی کنید و با prefers-reduced-motion آنیمیشن را برای کاربرانی که حرکت کم میخواهند غیرفعال نمایید. حتماً perspective را روی والد قرار دهید و برای عنصر درونی transform-style: preserve-3d تنظیم شود تا حالت سهبعدی درست نمایش داده شود. برای هر دو سمت backface-visibility: hidden و موقعیت absolute به همراه اندازه ثابت بگذارید تا پشت و جلوی کارت بهدرستی همپوشانی و چرخش یابند.
گزارش