WEB start
Компьютеры. Интернет. Профессиональное обучение. 055-966-10-17
Узнать подробнее
Регистрация на сайте
CSS 2D transforms
Трансформации в CSS позволяют перемещать, поворачивать, масштабировать и деформировать элементы.
- translate()
- rotate()
- scale()
- skewX()
- skewY()
- matrix()
Примеры:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS transform</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="rotate">rotate</div>
<div class="scale">scale</div>
<div class="skewX">skewX</div>
<div class="translateX">translateX</div>
</body>
</html>
div {
min-width: 100px;
font-size: 2rem;
background-color: orange;
padding: 50px;
margin: 50px;
text-align: center;
transition: transform 500ms linear;
color: #FFF;
}
div:hover {
background-color: rgba(255, 166, 0, 0.582);
}
.rotate:hover {
transform: rotate(0.01turn);
}
.scale:hover {
transform: scale(1.5, 1);
}
.skewX:hover {
transform: skewX(-10deg);
}
.translateX:hover {
transform: translateX(10px);
}