How to give effect of flipping letter with css3


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.

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

    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)
        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

asked by F. Juarez 04.11.2016 в 08:47

1 answer


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="" />
  <img class="back" src="" />
answered by 04.11.2016 в 10:36