Функция CSS skewX()
Передайте функции skewX() угол, и элемент наклонится вдоль оси X на эту величину.
Пример
Здесь угол в 20 градусов наклоняет элемент <div> по горизонтали, вдоль оси X.
Prompt
Создайте страницу с элементом div, наклонённым на 20 градусов вдоль оси X с помощью функции трансформации CSS
skewX(). Включите как обычный div, так и наклонённый div для сравнения.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS skewX()</title>
<style>
div.normal {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
margin: 40px;
}
div.skewed {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
margin: 40px;
transform: skewX(20deg);
}
</style>
</head>
<body>
<h2>CSS skewX() Function</h2>
<p>Normal div:</p>
<div class="normal">This is a normal div</div>
<p>Skewed div (skewX 20deg):</p>
<div class="skewed">This div is skewed 20 degrees along the X-axis</div>
</body>
</html>
Функция CSS skewY()
skewY() делает то же самое по другой оси: элемент наклоняется вдоль оси Y на переданный вами угол.
Пример
На этот раз по оси Y: элемент <div> ниже наклоняется на 20 градусов.
Prompt
Создайте страницу с элементом div, наклонённым на 20 градусов вдоль оси Y с помощью функции трансформации CSS
skewY(). Включите как обычный div, так и наклонённый div для сравнения.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS skewY()</title>
<style>
div.normal {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
margin: 40px;
}
div.skewed {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
margin: 40px;
transform: skewY(20deg);
}
</style>
</head>
<body>
<h2>CSS skewY() Function</h2>
<p>Normal div:</p>
<div class="normal">This is a normal div</div>
<p>Skewed div (skewY 20deg):</p>
<div class="skewed">This div is skewed 20 degrees along the Y-axis</div>
</body>
</html>
Функция CSS skew()
Чтобы наклонить элемент по обеим осям одним вызовом, передайте функции skew() угол для X и угол для Y.
Если опустить второй параметр, он считается равным нулю, и элемент наклоняется только по оси X.
Наклон по обеим осям
Здесь элементу <div> заданы два угла: 20 градусов для оси X и 10 градусов для оси Y.
Prompt
Создайте страницу с элементом div, наклонённым на 20 градусов вдоль оси X и на 10 градусов вдоль оси Y с помощью функции трансформации CSS
skew(). Включите как обычный div, так и наклонённый div для сравнения.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS skew()</title>
<style>
div.normal {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
margin: 40px;
}
div.skewed {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
margin: 40px;
transform: skew(20deg, 10deg);
}
</style>
</head>
<body>
<h2>CSS skew() Function</h2>
<p>Normal div:</p>
<div class="normal">This is a normal div</div>
<p>Skewed div (skew 20deg, 10deg):</p>
<div class="skewed">This div is skewed 20 degrees along the X-axis and 10 degrees along the Y-axis</div>
</body>
</html>
Наклон с одним параметром
С одним параметром в 20 градусов элемент <div> наклоняется только вдоль оси X.
Prompt
Создайте страницу с элементом div, наклонённым на 20 градусов вдоль оси X с помощью функции CSS
skew() только с одним параметром. Включите как обычный div, так и наклонённый div для сравнения.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS skew() with one parameter</title>
<style>
div.normal {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
margin: 40px;
}
div.skewed {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
margin: 40px;
transform: skew(20deg);
}
</style>
</head>
<body>
<h2>CSS skew() Function - One Parameter</h2>
<p>Normal div:</p>
<div class="normal">This is a normal div</div>
<p>Skewed div (skew 20deg):</p>
<div class="skewed">This div is skewed 20 degrees along the X-axis</div>
</body>
</html>
Функция CSS matrix()
matrix() объединяет все функции 2D-трансформации в один вызов.
matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()) показывает шесть её параметров по порядку.
Поэтому одно объявление может поворачивать, масштабировать, перемещать (translate) и наклонять элемент.
Пример
Prompt
Создайте страницу с элементом div, трансформированным с помощью функции CSS
matrix() со значениями matrix(1, -0.3, 0, 1, 0, 0). Включите как обычный div, так и трансформированный div для сравнения.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS matrix()</title>
<style>
div.normal {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
margin: 40px;
}
div.transformed {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
margin: 40px;
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
</style>
</head>
<body>
<h2>CSS matrix() Function</h2>
<p>Normal div:</p>
<div class="normal">This is a normal div</div>
<p>Transformed div (matrix):</p>
<div class="transformed">This div is transformed using the matrix() function</div>
</body>
</html>