我想让"输入"对象分别通过不同的按钮旋转和调整大小，例如，如果我按"button1"，那么对象将变得可调整大小(通过查询 ui 可调整大小(，如果我按"button2"，对象将顺时针旋转 90 度。
但是我发现如果我按 button2 旋转对象，然后按 button1 调整 obj 的大小，obj 调整大小的方向会奇怪地变化，导致 obj 的轴已经通过"旋转"功能发生了变化(我猜(，例如，如果我向左缩放，obj 会向右缩放...，我不知道如何处理这个问题， 任何人都可以给我一些建议吗？我感激不尽:)
我试图同时谷歌一些由"旋转"和"可调整大小"引起的错误，但在我看来，没有信息可以解决这个问题。
您可以通过以下方式尝试：
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<!please import query and query ui resizable>
<script src="js檔/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="js檔jquery-ui.customjquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js檔jquery-ui.customjquery-ui.min.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
</head>
<body >
<div id="1" style="position:absolute;top:150px;left:150px;border:2px black solid">
<input id="2" type="image" src="種子社群街區/房屋切片/實際大小/房屋6(96.25X297.32px).png" style="width:150px;height:100px">
</div>
<button id="3" type="button">rotate</button>
<button id="4" type="button">resize</button>
</body >
<script>
function resi(){
$("#2").resizable();
}
function rota(){
var w = $("#1").width();
var h = $("#1").height();
var di=Math.abs(h-w);
var obj=document.getElementById("1");
obj.style.transform="rotate(270deg) translateY("+0.5*di+"px) translateX("+-0.5*di+"px)";
}
document.getElementById("3").addEventListener("click",function(){rota()});
document.getElementById("4").addEventListener("click",function(){resi()});
</script>
</html>
您可以将任何您想要的图片放在输入的"src"处。 请按"旋转"，然后按"调整大小"，并尝试调整图片大小，您会发现一些奇怪的东西。
如果可能的话，我建议不要将Native JavaScript与jQuery混合使用。下面是一个基本示例。
$(function() {
function resi() {
$("#el-2").resizable();
}
function rota() {
var w = $("#el-1").width();
var h = $("#el-1").height();
var di = Math.abs(h - w);
var obj = $("#el-1");
obj.css("transform", "rotate(270deg) translateY(" + (0.5 * di) + "px) translateX(" + (-0.5 * di) + "px)");
}
$("#el-3").click(rota);
$("#el-4").click(resi);
});<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="el-1" style="position:absolute;top:150px;left:150px;border:2px black solid">
<input id="el-2" type="image" src="" style="width:150px;height:100px">
</div>
<button id="el-3" type="button">rotate</button>
<button id="el-4" type="button">resize</button>对于数学部分，最好将它们包装在(和)中，以确保先完成数学运算，然后再连接到字符串。