8

tengo un simple ejemplo de un div, el cual quiero rotarlo 180 grados Horizontalmente, mi ejemplo gira verticalmente lo cual no quiero

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 200px;
    height: 100px;
    background-color: yellow;
    /* Rotate div */
    -ms-transform: rotate(27deg); /* IE 9 */
    -webkit-transform: rotate(37deg); /* Chrome, Safari, Opera */
    transform: rotate(37deg);
}
</style>
</head>
<body>

<div>Hello</div>
<br>


</body>
</html>

1
  • @MarcosGallardo pero no se como hacer la transicion
    – hubman
    el 23 dic. 2016 a las 22:52

2 respuestas 2

12

Efecto: Vuelta carta

Determina la distancia entre el plano z=0 y el usuario para dar algo de perspectiva al elemento 3D posicionado.

Indica que los hijos del elemento deben colocarse en el espacio 3D.

Determina si la superficie trasera de un elemento es visible cuando se enfrenta el usuario. En este caso esta en hidden lo que significa que la superficie trasera no es visible.

Te permite modificar el espacio de coordenadas del modelo de formato visual y con el valor rotateY se mueve sobre el eje Y


.carta-box {
  width: 200px;
  height: 250px;
  position: relative;
  perspective: 1000px;
}

.carta-box:hover .carta {
    transform: rotateY(180deg);
}

.carta {
  transform-style: preserve-3d;
  transition: all 1s linear;
}

.cara {
  position: absolute;
  backface-visibility: hidden;
}

.cara.detras {
  transform: rotateY(180deg);
}
<div class="carta-box">
  <div class="carta">    
    <div class="cara">
      <img src="https://placeimg.com/200/250/tech" width="200" height="250px">
    </div>
    <div class="cara detras">
      <img src="https://placeimg.com/200/250/animals" width="200" height="250px">
    </div>    
  </div>
</div>

1
  • puedes explicar tu codigo?
    – hubman
    el 24 dic. 2016 a las 1:31
2

Agrega lo siguiente a tu CSS. Existe otras formas de hacer como con librerías JQuery, pero no hace falta. Solo con CSS puro podes hacerlo.

div {
    width: 200px;
    height: 100px;
    background-color: yellow;
    /* Rotate div */

    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

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.