.contenedor{
    height: 170px;
    width: 170px;
    margin: 10px auto;
    -webkit-perspective: 700;
    
   
}

.carta{
    height: 100%;
    width: 100%;
    position: relative;
    transform-style: preserve-3d; /*pa q los elemntos se conviertan en 3d y trabaja con otra prop:perspective*/
    transition: 2s;
     box-shadow: 0px 0px 15px black;
    
}
.carta:hover{
    transform: rotateY(180deg);
}

 
.lado {
     height: 100%;
    width: 100%;
 backface-visibility: hidden;  /*q el lado de atras del elemento esten ocultos*/
   position: absolute; 
    border-radius: 15px;
}

.frente {
    background: aqua;
}
.atras{
  background: linear-gradient(to right top, white, orange); 
 
    transform: rotateY(180deg);
}

img {
    width: 100%;
    height: 100%;
}

.atras > h3{
  text-align: center;
    color: blueviolet;
    margin: 10px auto;
    border:1px solid tomato;
    
}