El ángulo en CSS representa un cierto valor de ángulo que se puede expresar en grados, gradianes, radianes o vueltas. El valor del ángulo se puede utilizar para rotaciones, transformaciones o degradados, etc.
Sintaxis: El ángulo consta de un número seguido de una de las unidades permitidas.
property: number unit;
Unidades permitidas:
- deg: Representa un ángulo en grados. Un círculo completo es de 360 grados. Ejemplos: 0°, 90°.
- grad: Representa un ángulo en gradianes. Un círculo completo es 400grad. Ejemplos: 0grad, 38.8grad.
- rad: Representa un ángulo en radianes. Un círculo completo son 2π radianes, que se aproximan a 6,2832 rad. 1rad es 180/π grados. Ejemplos: 0rad, 1,07rad
- vuelta: Representa un ángulo en un número de vueltas. Un círculo completo es 1 vuelta. Ejemplos: 0 vuelta, 1.2 vuelta.
Ejemplo 1: usar la unidad de grado para rotar un elemento 90 grados.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>CSS | value angle</title>
</head>
<style>
div{
transform: rotate(90deg);
}
</style>
<body>
<h1 style="text-align: center; color: green;">GeeksforGeeks</h1>
<div style="width: 100px; height: 200px;
margin-left: 46vw; background: green;">
</div>
</body>
</html>
Producción:
Ejemplo 2: usar la unidad rad para rotar un elemento.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>CSS | value angle</title>
</head>
<style>
div{
transform: rotate(2rad);
}
</style>
<body>
<h1 style="text-align: center; color: green;">GeeksforGeeks</h1>
<div style="width: 100px; height: 200px;
margin-left: 46vw; background: green;">
</div>
</body>
</html>
Producción:
Ejemplo 3: usar la unidad de graduación para rotar un elemento.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>CSS | value angle</title>
</head>
<style>
div{
transform: rotate(10grad);
}
</style>
<body>
<h1 style="text-align: center; color: green;">
GeeksforGeeks
</h1>
<div style="width: 100px; height: 200px;
margin-left: 46vw; background: green;">
</div>
</body>
</html>
Producción:
Ejemplo 4: uso de la unidad de giro para rotar un elemento.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>CSS | value angle</title>
</head>
<style>
div{
transform: rotate(1.25turn);
}
</style>
<body>
<h1 style="text-align: center; color: green;">
GeeksforGeeks</h1>
<div style="width: 100px; height: 200px;
margin-left: 46vw; background: green;">
</div>
</body>
</html>
Producción: