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

Как повернуть div на 180 градусов по горизонтали

  • 772

У меня есть простой пример div, который я хочу повернуть на 180 градусов по горизонтали, мой пример вращается по вертикали, чего я не хочу 

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

    Эффект: Переверните карту

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

    Указывает, что дочерние элементы элемента должны быть размещены в трехмерном пространстве.

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

    Он позволяет изменять координатное пространство модели визуального формата и со значением 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>

    • 12

  2. Добавьте следующее в свой 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