CSS 3D-трансформации
С помощью свойства transform элемент можно перемещать, поворачивать, масштабировать или наклонять как в 2D, так и в 3D.
Функции CSS 3D-трансформаций
Для 3D-трансформаций transform принимает следующие функции:
rotateX()rotateY()rotateZ()
Функция CSS rotateX()
Вращением вокруг оси X занимается rotateX(), которая принимает величину поворота в градусах.
Пример
Prompt
Создайте страницу с элементом div, оформленным цветом фона. Примените CSS 3D-трансформацию rotateX(150deg), чтобы повернуть его вокруг оси X.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS rotateX()</title>
<style>
#myDiv {
width: 100px;
height: 100px;
background-color: #4CAF50;
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 50px;
transform: rotateX(150deg);
}
</style>
</head>
<body>
<h1>The rotateX() Function</h1>
<div id="myDiv">Hello</div>
</body>
</html>
Функция CSS rotateY()
Передайте rotateY() значение в градусах, и элемент повернётся на эту величину вокруг своей оси Y.
Пример
Prompt
Создайте страницу с элементом div, оформленным цветом фона. Примените CSS 3D-трансформацию rotateY(150deg), чтобы повернуть его вокруг оси Y.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS rotateY()</title>
<style>
#myDiv {
width: 100px;
height: 100px;
background-color: #4CAF50;
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 50px;
transform: rotateY(150deg);
}
</style>
</head>
<body>
<h1>The rotateY() Function</h1>
<div id="myDiv">Hello</div>
</body>
</html>
Функция CSS rotateZ()
В rotateZ() осью вращения служит ось Z элемента, а угол снова задаётся в градусах.
Пример
Prompt
Создайте страницу с элементом div, оформленным цветом фона. Примените CSS 3D-трансформацию rotateZ(90deg), чтобы повернуть его вокруг оси Z.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS rotateZ()</title>
<style>
#myDiv {
width: 100px;
height: 100px;
background-color: #4CAF50;
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 50px;
transform: rotateZ(90deg);
}
</style>
</head>
<body>
<h1>The rotateZ() Function</h1>
<div id="myDiv">Hello</div>
</body>
</html>