Código de JavaScript - Rotar diferentes imágenes con un click

Filtrado por el tag: reportes

Val: 211

Rotar diferentes imágenes con un click

Publicado el 6 de Junio del 2019 por Joan (121 códigos)

4.443 visualizaciones desde el 6 de Junio del 2019

Este simple código muestra como gestionamos los grados que ha girado cada elemento al pulsar con rotan encima de la imagen.

rotar

Publicado el 6 de Junio del 2019

4.444 visualizaciones desde el 6 de Junio del 2019

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<style>

	#imagenes {}

	#imagenes>div {display:flex;align-items:center;float:left;width:200px;height:200px;border:1px solid;}

	#imagenes>div>img {margin:auto;}

	</style>

</head>

<body>

<h2>Pulsa sobre cada elemento para rotarlo 45º</h2>

<div id="imagenes">

    <div>

        <img src="triangulo.png">

    </div>

    <div>

        <img src="trianguloEquilatero.png">

    </div>

    <div>

        <img src="rombo.png">

    </div>

    <div>

        <img src="paralelogramo.png">

    </div>

    <div>

        <img src="rectangulo.png">

    </div>

</div>

</body>

</html>

<script>

// creamos el evento click para cada imagen

const imagenes=document.querySelectorAll("#imagenes img");

imagenes.forEach((imagen) => {

    imagen.addEventListener("click",rotar);

});

function rotar() {

    // añadimos la propiedad rotación a cada elemento

    this.rotacion=(this.rotacion+45) || 45;

    // rotamos la imagen con estilos

    this.style.transform="rotate("+this.rotacion+"deg)";

</script>

Si alguno de los archivos de descarga no funciona, comentanos aquí el error.

No hay comentarios


Nombre

Correo (no se visualiza en la web)

Valoración

Comentarios...

CerrarCerrar

Es necesario revisar y aceptar las políticas de privacidad

Acepto las políticas de privacidad

http://lwp-l.com/s5346

Inventio Lite v1.8 - Sistema de Inventario y Ventas