javascript – How to rotate a div 180 degrees horizontally

Question:

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>

Answer:

Effect: Turn letter

Determines the distance between the z = 0 plane and the user to give the positioned 3D element some perspective.

Indicates that the children of the element should be placed in 3D space.

Determines if the back surface of an element is visible when facing the user. In this case it is hidden which means that the back surface is not visible.

It allows you to modify the coordinate space of the visual format model and with the rotateY value it moves along the Y axis


.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>
Scroll to Top