如何在旋转变换后调整div的大小时保留左上角位置？
如何在旋转变换后调整div的大小时保留左上角位置？
提问于 2018-12-06 08:24:59
我有一个绝对定位的div，它有一个45度的旋转变换。它有一个固定的高度，但宽度可以动态改变。
当我动态增加宽度时，整个元素向右向上漂移。
我如何防止这种移动，使左边缘留在原地？
let box = document.getElementById('box')
let range = document.getElementById('range')
box.style.width = range.value + "px";
range.oninput = function() {
box.style.width = range.value + "px";
}#box {
height: 100px;
top: 100px;
left: 100px;
position: absolute;
border: 1px solid black;
transform: rotate(45deg)
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Resize box</title>
</head>
<body>
<div class="slidecontainer">
<input type="range" min="50" max="300" value="50" class="slider" id="range">
</div>
<div id="box"></div>
</body>
</html>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-12-06 08:32:25
设置transform-origin
let box = document.getElementById('box')
let range = document.getElementById('range')
box.style.width = range.value + "px";
range.oninput = function() {
box.style.width = range.value + "px";
}#box {
height: 100px;
top: 100px;
left: 100px;
position: absolute;
border: 1px solid black;
transform-origin:0 0;
transform: rotate(45deg)
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Resize box</title>
</head>
<body>
<div class="slidecontainer">
<input type="range" min="50" max="300" value="50" class="slider" id="range">
</div>
<div id="box"></div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53642823
复制相关文章
相似问题