0

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://i.stack.imgur.com/QfcbM.jpg

.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?

3
  • Me temo que tendrás que utilizar javascript el 21 nov. 2017 a las 16:37
  • perfecto, y sabes algo al respecto o que deberia utilizar? el 21 nov. 2017 a las 16:38
  • 1
    Por que no subes el código de toda la estructura html que tienes para esa parte en concreto ? el 21 nov. 2017 a las 16:42

3 respuestas 3

5

No necesariamente necesitas JavaScript para hacer lo que requieres en tu pregunta, puedes hacerlo con CSS de la siguiente forma:

input[type="checkbox"]{
    display: none;
}

input[type="checkbox"]:checked + label img{
    transform: perspective(500px) rotateY(-180deg) translateX(100%);
}
<input type="checkbox" name="imagen" id="imagen">
<label for="imagen">
    <img src="https://i.imgur.com/TRGwus4.png" alt="Imagen" id="img">
</label>

Es un pequeño truco que podrías utilizar en caso de que no quieras usar JavaScript o sus librerías.

2
3

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:

$(function(){
  $('.card').click(function(){ $(this).toggleClass('flip'); });
});
.card{
  width: 100px;
  height: 200px;
  border: solid 1px black;
  left: 100px;
  position: relative;
}

.flip {
    transform: perspective(500px) rotateY(-180deg) translateX(100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">carta a rotar</div>

1
1

Fijate si te sirve esta librería, https://nnattawat.github.io/flip/

Saludos.

1

Tu Respuesta

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

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