How to give effect of flipping letter with css3

Question

How to give effect of flipping letter with css3

Navigation

#1 by (6 votes)

4

Good evening, I try to make an effect of flipping a letter, but when I do it my rear image appears to me the other way around, I have this code.

.flip{
    position: relative;
    transition: all 1s ease;
    transform: perspective(600px);
    transform-origin: 100% 50%;
    transform-style: preserve-3d;
}
.flip:hover{

    transform: perspective(600px) rotateY(-180deg) translateX(100%);
}

And I'm applying it to this image:

<img class ="flip" id = "cara" onMouseOver="cambiar()" onMouseOut = "volver()" width="100" height="150" src="carta1.jpg" onclick="cartasDeJugador()">

js functions

function cambiar () {
    if(mazo[mazo.length-1] === undefined)
        iniciarJuego();
    else
        document.getElementById('cara').src = mazo[mazo.length-1];
 }

 function volver () {
  document.getElementById('cara').src = "carta1.jpg";
 }

I would like the rear image to appear correct and not the other way around

javascript css3

asked by F. Juarez 04.11.2016 в 08:47

source

1 answer

Count times an item is repeated in a php fix Query does not return the expected values

score 6 · Answer 1

I have noticed the link that my colleague has contributed and I have put an example .

As you can see, what I have done has been to create a container that refers to a letter with a back face and a front one, I have called it that way but you could put the class carta for example.

If you want compatibility with iOS tablets in Chrome, you must add the -webkit-transition property next to transition

.front, .back, .container {
  width: 320px;
  height: 480px;
}

.front, .back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.front {
  z-index: 2;
  transform: rotateY(0deg);
  transition: all 0.3s linear;
}

.back {
  transition: all 0.3s linear;
  transform: rotateY(180deg);
}

.container {
  position: relative;
}

.container:hover .front {
  transform: rotateY(180deg);
}

.container:hover .back {
  transform: rotateY(360deg);
}

<div class="container">
  <img class="front" src="http://www.lorempixel.com/320/480/abstract" />
  <img class="back" src="http://www.lorempixel.com/320/480/cats" />
</div>