Задание угла поворота в CSS
Задает угол наклона или поворота. Положительное значение отмеряется по часовой стрелке, отрицательное против часовой стрелки.
Синтаксис
Свойство: <угол>
Угол может задаваться в следующих единицах:
- В градусах (deg). Полный круг равен 360deg.
- В градах (grad). Полный круг равен 400grad.
- В радианах (rad) Полный круг равен 2π (~6.2832rad).
- В поворотах (turn). Один круг равен одному повороту (пишется 1turn).
Рассмотрим занчения некоторых углов (например, кратных 90º):
|
90deg = 100grad = 0.25turn ≈ 1.5708rad |
|
180deg = 200grad = 0.5turn ≈ 3.1416rad |
|
270deg = 300grad = 0.75turn ≈ 4.7124rad |
|
-90deg = -100grad = -0.25turn ≈ -1.5708rad |
Пример задания угла в CSS свойствах
<!DOCTYPE html>
<html>
<head>
<title>Градиенты под углом</title>
<meta charset="utf-8">
<style>
.leaf-top-left {
background-image: linear-gradient(135deg, #f00, #000);
}
.leaf-top-left,
.leaf-bottom-right {
border-radius: 0 50%;
}
.leaf-top-right,
.leaf-bottom-left {
border-radius: 50% 0;
}
.leaf {
width: 100px;
height: 100px;
margin: 0;
float: left;
background-color: #dfdfdf;
}
.flower {
margin: 0 auto;
padding-top: 80px;
width: 200px;
}
</style>
</head>
<body>
<div class="flower">
<div class="leaf leaf-top-left"></div>
<div class="leaf leaf-top-right"></div>
<div class="leaf leaf-bottom-left"></div>
<div class="leaf leaf-bottom-right"></div>
</div>
</body>
</html>