یک کارت مربع ساده با HTML و CSS بسازید که وقتی موس روی آن قرار میگیرد، بهصورت نرم 45 درجه بچرخد، 1.2 برابر شود، کمی به راست و پایین منتقل شود و اندکی کج (skew) شود.
16.0 بازدید آخرین ویرایش در 198 روز قبل ساعت 01:56 0.0
برای حل این مسئله از یک عنصر HTML مثل div و از ویژگیهای CSS استفاده کنید: از transform با توالی توابع rotate(), scale(), translate() و skew() برای اعمال تغییرات، و از transition برای ایجاد انیمیشن نرم بهره ببرید؛ ترتیب توابع در transform مهم است و بهتر است همهٔ تبدیلها را در یک دستور transform بنویسید. نکات: از :hover برای فعالسازی افکت استفاده کنید، در صورت نیاز transform-origin را تنظیم کنید و برای سازگاری قدیمیتر میتوانید پیشوندهای مرورگر را اضافه نمایید.
توسط پژوهشگر در 198 روز قبل ساعت 01:56 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
برای روان و بدون پرش شدن انیمیشن از یک دستور transform واحد استفاده کنید چون ترتیب توابع (مثلاً rotate() قبل یا بعد از translate() تفاوت دارد) نتیجه نهایی را تغییر میدهد. مقدار مناسب transform-origin (معمولاً center) و یک transition مثل transition: transform 0.3s ease کمک میکند تا تغییرات نرم شوند. برای بهبود عملکرد در مرورگرهای ضعیفتر از will-change: transform و در صورت نیاز backface-visibility: hidden استفاده کنید و در صورت پشتیبانی قدیمی، پیشوندهای مرورگر را اضافه کنید. همچنین مطمئن شوید مقادیر scale و translate متناسب با اندازه کارت انتخاب شوند تا بر چینش صفحه تأثیر نامطلوب نداشته باشند.
گزارش