Como rotar 180 grados horizontalmente un div

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>
7
задан 24.12.2016, 01:12
0 ответов

Эффект: Направленное письмо

Определи дистанцию между плоскостью z=0 и пользователь, чтобы давать немного перспективы элементу 3D posicionado.

Покажи, что дети элемента должны размещаться в месте 3D.

Определи, если задняя поверхность элемента видимая, когда сталкивается пользователь. В этом случае эта в hidden то, что значит, что задняя поверхность не является видимой.

Он позволяет тебе изменять место координат модели визуального формата и со стоимостью rotateY он двигается на оси 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>
11
ответ дан 03.12.2019, 17:59

Добавь следующее за твоим CSS. Существуй другие способы делать как с книжными магазинами JQuery, но он не надо. Только с чистым CSS обрежь делать это.

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
ответ дан 03.12.2019, 17:59