Home / Questions / 40807
Accepted
hubman
Asked: 2020-12-24 14:33:54 +0800 CST 2020-12-24 14:33:54 +0800 CST

How to rotate 180 degrees horizontally a div

  • 772

I have a simple example of a div, which I want to rotate 180 degrees Horizontally, my example rotates vertically which I don't want 

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

javascript

2 Answers

  1. Best Answer

    Effect: Turn card

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

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

    Determines whether 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 value rotateY it moves on the axisY

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

    • 12

  2. Add the following to your CSS. There are other ways to do it like with JQuery libraries, but it's not necessary. Only with pure CSS can you do it.

    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);
}
    • 2