如何将转换后的div放在网页左边缘旁边?

问题描述 投票:0回答:1

我正在尝试将div旋转270度并将其放在网页最左侧的旁边。然而,即使我已经确定边距都设置为0,但是在div和页面的侧面之间似乎总是存在间隙。我也注意到当你增加div的宽度时(即,变换后的div的高度,差距越大,几乎就像div的属性根本没有被转换一样。这是什么以及如何解决它?

<!DOCTYPE html>
<html>
<head>
<style>
html, body {
  margin: 0;
}
</style>
</head>
<body>
<div style="position:absolute;top:0px;left:0px;width:200px;height120px;background-color:red;transform:rotate(270deg);"><h1>test</h1></div>
</body>
</html>
html rotation transform margin
1个回答
0
投票

如果你将左边设置为-40就可以了。当你调整div宽度时,你将不得不做数学并调整它。

<!DOCTYPE html>
<html>
<head>
<style>
html, body {
  margin: 0;
}
</style>
</head>
<body>
<div style="position:absolute;
            top:0px;
            left:-40px;
            width:200px;
            height:120px;
            background-color:red;
            transform:rotate(270deg);
            ">
            <h1>test</h1></div>
</body>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.