Question

我有一个矩形div，在某些情况下我想旋转180度。

我正在使用css transform属性旋转div。

这在chrome上效果很好，但在边缘上发生的情况是div超出了其容器div。我希望div本身处于原始位置，但旋转180度。

.container {
  display: flex, flex-direction: row, align-items: center, justify-content: flex-end, writing-mode: vertical-lr width:100px, height:100px, border: solid red 1px;
}

.rotate {
    transform: rotate(180deg); 
    transform-origin: left top
}

<div class="container">
  <div class="rotate">
    Hello
  </div>
</div>

Answer 1

正如@Bali Balo指出的那样，.container CSS都不可用，原因是逗号。

我怀疑（尽管没有一个有效的例子很难确定）您的问题是两个相互竞争的布局系统。您的Flex CSS告诉内容要对齐到结尾-或右边（justify-content: flex-end）。您的转换CSS告诉.rotate围绕左上角旋转。

Chrome会在旋转子元素时尊重您在容器上的align-items: center。我没有Edge测试浏览器，但我怀疑它是对您内部DIV上的“ transform-orgin”的尊重。

因此transform-origin: center center;应该使矩形绕其中心而不是其左上角枢转。

全部，如果没有帮助，我想我会尝试清理一些Flex代码。

Answer 2

.container {
  display: flex, flex-direction: row, align-items: center, justify-content: flex-end, writing-mode: vertical-lr width:100px, height:100px, border: solid red 1px;
}

.rotate {
  font-size: 30px;
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="container">
  <div class="rotate">
    Hello
  </div>
</div>
</body>
</html>

使用transform: rotateX(180deg);以便元素在旋转时保持原状

CSS将div旋转180度

2 个答案: