Css 将 div 原地旋转 180 度答案

【问题标题】：Css rotate a div 180 degrees in placeCss 将 div 原地旋转 180 度
【发布时间】：2019-11-25 17:16:26
【问题描述】：

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

我正在使用 css 转换属性来旋转 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>

【问题讨论】：

你能提供一个你现在拥有的例子吗？使用 sn-p。
您在 CSS 中使用逗号而不是分号。此外，rotate div 可能不是您期望的大小（您可以通过添加背景更好地看到它）。您可以尝试将display: inline-block; 添加到.rotate 以使其内容大小，并删除transform-origin（使用其默认值center）

标签： html css transform

【解决方案1】：

.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); 使元素在旋转时保持原位

【讨论】：

垂直翻转元素。不太可能是问题所要求的，因为在未指定时，“旋转”通常是指标准的 2d 旋转（如果您考虑 3 维平面，则围绕 Z 轴）
你能举个例子吗？

【解决方案2】：

正如@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 代码。

【讨论】：