Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 41 из 53 · 9 мин
transform, translate, rotate, scale, transform-origin и perspective.
При наведении карточка чуть подпрыгивает и подрастает — как будто тянется к тебе.
transform не двигает соседей и анимируется очень плавно. Идеально.
transformtransform: translateY(-4px) scale(1.03) — функции через пробел.<style>
.card { padding: 10px; background: #fdf6ec; transition: transform .2s; } .card:hover { transform: translateY(-6px) scale(1.04); }
</style>
<div class="card">Наведи на карточку</div>translate()translateX(10px), translate(10px, -4px). Есть и отдельное свойство translate.rotate()rotate(45deg), rotate(0.5turn).<style>
.arrow { display: inline-block; transform: rotate(90deg); color: #c8763a; font-size: 24px; }
</style>
<span class="arrow">➜</span> повернул на 90°scale()scale(1.1) — на 10% больше; scale(-1, 1) — зеркально.transform-origincenter, top left, 50% 100%.<style>
.door { width: 60px; height: 40px; background: #c8763a; transform-origin: left; transform: rotate(-20deg); margin: 10px; }
</style>
<div class="door"></div>perspectiveperspective: 600px у родителя — дети вращаются в 3D объёмно.<style>
.scene { perspective: 300px; padding: 8px; } .c { background: #c8763a; color: white; padding: 8px; transform: rotateY(35deg); }
</style>
<div class="scene"><div class="c">3D-поворот</div></div>Двигай через transform, а не top/left: так плавнее и соседи не прыгают.
На .card:hover задай transform: translateY(-4px), а самой .card — transition: transform 0.2s.
Выберите один ответ.
Почему анимировать сдвиг лучше через transform, а не через top?
Выберите один ответ.
Какое свойство задаёт точку, вокруг которой поворачивается элемент?
Проверяем состояние обучения…