2

Tengo el siguiente CSS donde tengo las clases para añadir el efecto de rotación sobre un elemento:

.animal{
    width:200px;
    height:200px;
    margin:25px;
    float:left;
    background-size: contain;
}

.rota{
     transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg); 

     transition: transform 4s;
    -webkit-transition: -webkit-transform 4s;
    -moz-transition: -moz-transform 4s;     
}

¿Cómo se puede añadir la clase .rota, además de tener la clase .animal inicialmente?

Deseo que al hacer click sobre un animal, éste gire (una vuelta).

Código Javascript/DOM:

/*Exclusivamente usar funciones DOM.*/
//Al cargar el documento, realizamos las funciones en primer lugar dentro de "window.onload".
window.onload = function(){
    //Generamos la tabla en primer lugar.
    crearTabla();

    /*Gestionamos los eventos para cada animal*/
    document.getElementById("cerdo").onclick = sonidoCerdo;
    function sonidoCerdo() {
        //Como añado para que tambien tenga la clase .animal y .rota
    }


    /*Función para lanzar el sonido del cerdo.*/
    function sonidoGato() {
        alert('GATO');
    }
    //Asignar la función externa al elemento con id=gato.
    document.getElementById("gato").onclick = sonidoGato;

    //asi tambien para perro y vaca.
}


/*Exclusivamente con DOM, crear una tabla 2x2 (4 elementos-casillas).*/
function crearTabla() {
    var animales = ["cerdo", "gato", "perro", "vaca"];
    //Obtener la referencia del elemento body.
    var body = document.getElementsByTagName("body")[0];
    //Creamos el elemento/objeto que deseamos: <div>.
    var div = document.createElement("div");
    //Asignamos un id al div creado.
    div.setAttribute("id", "animales");
    //Agregamos al body el div.
    body.appendChild(div);

    //Crea un elemento <table> y un elemento <tbody>.
    var tabla = document.createElement("table");
    var tblBody = document.createElement("tbody");

    //Crea las celdas. 
    var contador = 0;
    for (var i=0; i<2; i++) {
        var hilera = document.createElement("tr"); 
        for (var j=0; j<2; j++) {
            //Creamos el elemento <td> por cada celda.
            var celda = document.createElement("td");
            //Creamos el elemento <img> al cual asociamos el atributo de la ruta de la imagen.
            var imagenAnimal = document.createElement("img");
            imagenAnimal.setAttribute("src", "./images/"+animales[contador]+".png");    
            //Creamos el elemento <audio> al cual asociamos un elemento <source>.
            var audioAnimal = document.createElement("audio");
            var sourceAnimal = document.createElement("source");
            sourceAnimal.setAttribute("src", "./sounds/"+animales[contador]+".wav");
            sourceAnimal.setAttribute("type", "audio/wav");
            //Al audioAnimal le añadimos el sourceAnimal.
            audioAnimal.appendChild(sourceAnimal);
            //Creamos el elemento <div> para cada animal al cual asociamos un id y una clase.
            var divAnimal = document.createElement("div"); 
            divAnimal.setAttribute("id", animales[contador]);           
            divAnimal.setAttribute("class", "animal");
            //Al divAnimal le añadimos la imagen del animal.
            divAnimal.appendChild(imagenAnimal);
            //A la celda le añadimos el divAnimal.
            celda.appendChild(divAnimal); 
            //A la hilera "tr" le añadimos la celda "td".
            hilera.appendChild(celda);
            contador++;
        } 
        //Agrega la hilera al final de la tabla (al final del elemento tblbody). 
        tblBody.appendChild(hilera); 
    }

    //Posiciona el <tbody> debajo del elemento <table>.
    tabla.appendChild(tblBody);
    //appends <table> into <body>.
    div.appendChild(tabla);
    //Modifica el atributo "border" de la tabla y lo fija a "2";
    tabla.setAttribute("border", "2");
}
1
  • ¿Podrías mostrar la parte HTML y subir las imágenes?
    – user13558
    Commented el 13 feb. 2020 a las 8:08

1 respuesta 1

2

Utilizando DOM, basado en el código que tienes, deberías agregar lo siguiente:

div.className += " rota";

básicamente le concatenas un espacio vacío y la nueva clase a tu class="animal" , quedando class="animal rota" .

Luego, si necesitas quitarla puedes volver a div.className = "animal"; Que sobreescribirá lo anterior por solo "animal"

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.