我正在尝试旋转图像，但是图像在枢轴点旋转答案

【问题标题】：I am trying to rotate the image, however the image is rotating at a pivot point我正在尝试旋转图像，但是图像在枢轴点旋转
【发布时间】：2020-04-07 23:13:48
【问题描述】：

我希望图像在单击时旋转。图像应该顺时针旋转 90 度。但是，当我希望它在灰色矩形的右上角旋转时，枢轴点当前位于元素的中心内。任何建议或指导将不胜感激。

var svgNS = "http://www.w3.org/2000/svg";
var htmlNS = "http://www.w3.org/1999/xhtml";
function createShape() {
  var container = document.getElementById("container");
  var outer = document.createElementNS(svgNS, "svg");
  container.append(outer);
  outer.id = "outer"
  console.log(outer.id)
  outer.style.background = "grey";
  outer.style.height = "100px";
  outer.style.width = "150px";
  outer.style.left = "150px";
  outer.style.top = "200px";
  outer.style.position = "absolute";
  var shape1 = document.createElementNS(svgNS, "rect");
  outer.append(shape1);
  shape1.style.width = "100%";
  shape1.style.height = "50%";
  shape1.style.fill = "orange";
  var shape2 = document.createElementNS(svgNS, "rect");
  outer.append(shape2);
  shape2.style.width = "33.33%";
  shape2.style.height = "100%";
  shape2.style.fill = "orange";
}
window.onload = createShape;
window.onclick = rotate;
function rotate() {
  var outer = document.getElementById("outer");
  console.log(outer.style.background)
  outer.style.transform = "rotate(90deg)";
}

.grid {
    background-image: repeating-linear-gradient(0deg,transparent,transparent 49px,#88F 49px,#88F 50px),
                    repeating-linear-gradient(-90deg,transparent,transparent 49px,#88F 49px,#88F 50px);
    background-size: 50px 50px;
    top: 8px;
    height: 651px;
    position: absolute;
    width: 501px;
}
#left {
    top: 0px;
    width: 250px;
    height: 650px;
    position: absolute;
    background: transparent;
}
#right {
    left: 250px;
    top: 0px;
    width: 250px;
    height: 650px;
    position: absolute;
    background: transparent;
}

<!DOCTYPE html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tetris(test2)</title>
    <link rel="stylesheet" href="styleSheets/main.css">
    <script src = "https://code.jquery.com/jquery-3.4.1.js"></script>
    <script src = "js/jquery.1.js"></script>
    <script src = "js/main.js"></script>
  </head>
  <body>
    <div id="container" onclick= "rotate()" style= "height: 650px; width: 500px; background: black; position: relative">
      <div id= "left" onclick= "moveLeft()"></div>
      <div id= "right" onclick= "moveRight()"></div>
    </div>
    <div class= "grid"></div>

  </body>

【问题讨论】：

标签： javascript html svg rotation element

【解决方案1】：

你需要 transform-origin CSS 属性！

对于 Javascript：https://www.w3schools.com/jsref/prop_style_transformorigin.asp

对于 CSS：https://www.w3schools.com/cssref/css3_pr_transform-origin.asp

您可以将这样的内容应用到 outer 元素，如下所示：

outer.style.transformOrigin = "left top";

只需将其与其余样式一起放入 createShape() 函数中

我还建议您在每次创建元素时都使用 CSS，而不是 Javascript 进行样式

【讨论】：

它对我有用，不过我不知道这是不是你想要的
因为每次你所做的只是将旋转设置为 90 度，而不是增加它！
要做到这一点，您需要记住形状的方向，然后使用它来将旋转设置为正确的量。也许您可以通过在每个形状的函数上调用new 运算符来构造对象的实例数组。在每个对象中，您可以存储形状的位置和方向，以及形状的类型和元素本身。也许有一个单独的数组用于不再活动且不能再移动的形状。然后将活动的放在它自己的变量中。
（我假设你想在这里制作类似俄罗斯方块的东西）一开始，你用函数创建一个形状，你将形状的类型传递给它，它会返回一个对象形状和新创建的元素的属性。您将该对象放入活动形状的变量中，并创建用于移动和旋转活动形状的函数。然后，当它到达底部时，您将变量放入一个数组中以获得非活动形状，或者将其全部丢弃。然后您创建一个新形状，方法与上一个形状相同。
另外你必须做一些魔法来检测形状是否可以与其他形状相匹配。也许将那些不活动的形状存储为单独的正方形，这会让事情变得更容易。

【解决方案2】：

通过 CSS 在您正在旋转的元素上设置变换原点。

例如，

transform-origin: top left;

也可以在这里查看更多文档：https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

【讨论】：