Css 将 div 旋转 180 度
use*_*123 5 html css transform
我有一个矩形 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>naz*_*hid 11
.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);以便元素在旋转时保持原位
As @Bali Balo points out, none of the .container CSS will work because of the commas.
I suspect (though it\'s hard to know for sure without a working example) that your issue is two competing layout systems. Your Flex CSS is telling the content to justify to the end \xe2\x80\x93 or right side (justify-content: flex-end). Your transform CSS is telling .rotate to pivot around the top left corner.
Chrome is honoring your align-items: center on the container when it rotates child elements. I haven\'t got an Edge test browser, but I suspect it is honoring the \'transform-orgin\' you have on the inner DIV.
So transform-origin: center center; should make the rectangle pivot around its center rather than its top left corner.
All up, I think I\'d try to clear up some of that Flex code if it\'s not helping.
\n