یک کارت با کلاس .card ایجاد کنید که هنگام هاور با انیمیشن نرم 15 درجه بچرخد، 1.05 برابر مقیاس یابد و 10px به سمت بالا ترجمه شود.

Question

در HTML یک عنصر با کلاس .card بسازید و با CSS از پراپرتی transition برای ایجاد حرکت نرم و از transform برای اعمال rotate(15deg) ،scale(1.05) و translateY(-10px) استفاده کنید؛ مثال: .card { transition: transform 0.3s ease; transform-origin: center; } .card:hover { transform: rotate(15deg) scale(1.05) translateY(-10px); } نکات: توابع transform را در یک خط ترکیب کنید، ترتیب توابع بر نتیجه نهایی تاثیر...

هوشیار · Accepted Answer

کارت

/* پایهٔ کارت و حرکت نرم با استفاده از transition و transform */
.card {
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.card:hover {
  -webkit-transform: rotate(15deg) scale(1.05) translateY(-10px);
  transform: rotate(15deg...

1 پاسخ