Un elemento se puede rotar 90 grados usando la propiedad de transformación . Esta propiedad se usa para mover, rotar, escalar y otros para realizar varios tipos de transformación de elementos.
La función de transformación de rotate() se puede usar como el valor para rotar el elemento. Toma un parámetro que define el ángulo de rotación. El ángulo de rotación consta de dos partes, el valor de la rotación seguido de la unidad de rotación. La unidad se puede definir en grados (deg), gradiente (grad), radianes (rad) y vueltas.
Para rotar 90 grados se puede utilizar cualquiera de las unidades con sus valores correspondientes. 90 grados equivaldrían a 100 gradientes o 0,25 vueltas.
Aplicar esta propiedad al elemento requerido lo rotaría 90 grados.
Sintaxis:
// Using CSS transform: rotate(90deg); // Using JavaScript element.style.transform = 'rotate(90deg)';
Ejemplo: El ejemplo usa un rectángulo y un lado de un borde para explicar la rotación.
<!DOCTYPE html>
<html>
<head>
<title>
How to rotate an HTML div element
90 degrees using JavaScript ?
</title>
<style>
.box {
height: 250px;
width: 150px;
border-right: 5px solid;
background-color: lightgreen;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to rotate an HTML div
element in 90 degrees?
</b>
<p>
Click on the button below to rotate
the element by 90 degress.
</p>
<div class="box"></div>
<button onclick="rotateElem()">
Rotate by 90 degrees
</button>
<script type="text/javascript">
function rotateElem() {
document.querySelector('.box').style.transform
= 'rotate(90deg)';
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA