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 元素提供一些透视。

    指示元素的子元素应放置在 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