Evento CSS al pulsar sobre contenedor

publicado por: Anonymous

Tengo una imagen y estoy tratando de que al darle click encima me haga un efecto flip que ya tengo realizado y me de vuelta la imagen. La cuestión es que lo he manejado con over y con active. Pero uno me lo hace cuando tengo el raton encima de la imagen y el otro cuando pulso sobre la imagen, y tengo que tener el raton pulsado encima de la imagen mientras hace toda la transicion.

Mi idea es que cuando pulse una imagen de una carta me de vuelta a la carta y se muestre. Y cuando la pulse de nuevo vuelva a su estado origen. y no se si puedo tratar esto via css.

https://imgur.com/a/AOt0r

.flip:active {
    transform: perspective(500px) rotateY(-180deg) translateX(100%);
}

flip es la clase que tienen los contenedores de las cartas de la imagen

¿Hay alguna propiedad css como el onclick?

solución

Puedes añadirle una clase al elemento al hacer click sobre él.

Hay diferentes formas de hacerlo. Utilizando jQuery podrías utilizar, por ejemplo, el método toggleClass de forma que el primer click añadiese la clase y el siguiente la eliminase devolviendo el elemento a su estado original:

_x000D_

_x000D_

$(function(){_x000D_
  $('.card').click(function(){ $(this).toggleClass('flip'); });_x000D_
});

_x000D_

.card{_x000D_
  width: 100px;_x000D_
  height: 200px;_x000D_
  border: solid 1px black;_x000D_
  left: 100px;_x000D_
  position: relative;_x000D_
}_x000D_
_x000D_
.flip {_x000D_
    transform: perspective(500px) rotateY(-180deg) translateX(100%);_x000D_
}

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<div class="card">carta a rotar</div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *