jquery - 如何更改使用 CSS 或 JQuery 连续旋转的元素的位置(没有位置 : absolute)?

Question

这是我的 JSFiddle .

问题是什么？

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 的左上角，迫使蓝色隐藏。]

$(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 移动以获得精确的旋转/位置。

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

* {
  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>