gpt4 book ai didi

html - css 原地旋转一个div 180度

转载 作者:行者123 更新时间:2023-11-27 23:40:20 25 4
gpt4 key购买 nike

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

我正在使用 css 变换属性来旋转 div。

这在 chrome 上运行良好,但在 edge 上会发生 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>

最佳答案

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

关于html - css 原地旋转一个div 180度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57066231/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com