Menu
I have a rectangular div that I want to rotate by 180 degrees in certain scenarios.
I am using the css transform property to rotate the div.
This works nicely on chrome but on edge what happens is that the div goes outside of its container div. I want the div to be in its original position itself but rotated by 180 degrees.
.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>
665
.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>Use transform: rotateX(180deg); so that the element will stay in place while rotating
74
answered Sep 28 '22 08:09
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With