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.sstatic.net/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 Commented el 21 nov. 2017 a las 16:37
  • perfecto, y sabes algo al respecto o que deberia utilizar? Commented 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 ? Commented 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
  • Gracias por la ayuda compañero Commented el 24 nov. 2017 a las 16:56
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 you have read our privacy policy.

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