如何使用 CSS 或 JQuery （没有位置：绝对）更改连续旋转的元素的位置？

Question

问题是什么？

I have two <div>s i.e with red and blue classes. red is just to indicate original position of blue class. Rest everything, we are only focusing on blue.

Now, when I hover on blue, it starts rotating continuously till infinity. And when it rotates more than 95deg approximately, we can see that some part of blue class gets out of the left of the body. Similarly, when it reaches on the upper-half during rotation, it's some part gets out on the upper side of the body.

我想要的：

I want is that when the blue starts hiding to the left, it should be pushed from left so as to get shifted to the right and thus avoiding from getting hidden. Similarly, it should be pushed from the top gradually as it starts hiding on the upper side.

You can apply margin or even translate for changing the position of the blue. But, position absolute is not allowed in this case. So, I have to stick at that. Sorry about that.

知道自己做错了什么让我精疲力尽。如果你能帮我找出答案，那将是一个很大的帮助。提前致谢。

[注意: 我不能改变旋转原点。它必须是 body 的 top-left 迫使 blue 隐藏。]

$(function(){ 
  var blueDivOffset = $(".blue").offset();
  var blueDivOffsetTop = blueDivOffset.top;     //20
  var blueDivOffsetLeft = blueDivOffset.left;   //28
  
  function rotate() {
    //console.log(blueDivOffsetTop); 
    //console.log(blueDivOffsetLeft);
    
    if( 0 < blueDivOffsetTop < 20 ) {
      var operation = 20 - blueDivOffsetTop;
      $(".blue").css({"margin-top": operation+"px"});
    } else if (blueDivOffsetTop < 0){
      var operation = 20 + (-1) * blueDivOffsetTop;
      $(".blue").css({"margin-top": operation+"px"});
    } else {
      $(".blue").css({"margin-top": 0});
    }
    
    if( 0 < blueDivOffsetLeft < 28 ) {
      var operation = 28 - blueDivOffsetLeft;
      $(".blue").css({"margin-left": operation+"px"});
      //console.log("hi");
    } else if (blueDivOffsetLeft < 0){
      var operation = 28 + (-1) * blueDivOffsetLeft;
      $(".blue").css({"margin-left": operation+"px"});
    } else {
      $(".blue").css({"margin-left": 0});
    }
    var margLeft = $(".blue").css("margin-left");
    console.log(margLeft);
  }
  
  $(".blue").hover(function(e){
    to = window.setInterval(rotate, 1);
  },function(e) {
    window.clearInterval(to);
  });
  //setInterval(rotate, 1);
});

* {
    box-sizing: border-box;
}
div > div {
    height: 50px;
    width: 300px;
}
.main {
    margin: 20px;
    position: relative;
}
.blueParent {
    
}
.blue {
    background-color: blue;
    /* position: absolute;
    top: 0;
    left: 0; 
    transform: rotate(180deg) translate(0,0);
    transform-origin: 25px 25px; */ 
    background-color: blue;
    transform: rotate(0deg) translate(0,-50px);
    transform-origin: 25px -25px;
    
}
.blue:hover {
    animation: rotate 5s linear infinite reverse;
}

.red {
    background-color: red;
}

@keyframes rotate {
  0 { transform: rotate(-90deg) translate(0,-50px); }
  25% { transform: rotate(-180deg) translate(0,-50px); }
  50% { transform: rotate(-270deg) translate(0,-50px); }
  100% { transform: rotate(-360deg) translate(0,-50px); }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div class="red"></div>
    <div class="blue" id="blue"></div>
</div>

Answer 1

这是执行此操作的基本设置。主要技巧是先旋转再重新定位。

现在您可以详细说明度数和 x/y 移动以获得准确的 rotation/position。

我在测试这个的时候添加了更多的步骤，这将需要让它旋转得更平滑，并且更早地开始重新定位，这样它就不会碰到边缘，不过这些调整有点费时，所以我把它们留给你:)

* {
  box-sizing: border-box;
}
div>div {
  height: 50px;
  width: 300px;
}
.main {
  margin: 50px;
  position: relative;
}
.blue {
  background-color: blue;
  position: relative;
  top: -50px;
  background-color: blue;
  transform-origin: 0px 50px;
}
.main:hover .blue {
  animation: rotate 5s linear infinite reverse;
}
.red {
  background-color: red;
}
@keyframes rotate {
  0% {
    transform: translate(0, 0) rotate(0deg)
  }
  25% {
    transform: translate(300px, 250px) rotate(-90deg)
  }
  50% {
    transform: translate(300px, -50px) rotate(-180deg)
  }
  75% {
    transform: translate(0, -50px) rotate(-270deg)
  }
  100% {
    transform: translate(0, 0) rotate(-360deg)
  }
}

<div class="main">
  <div class="red"></div>
  <div class="blue" id="blue"></div>
</div>

如何使用 CSS 或 JQuery （没有位置：绝对）更改连续旋转的元素的位置？

How can I change the position of the element which is continuously rotating using CSS or JQuery (without position: absolute)?

css

jquery

css-transforms