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

Question

What is the problem?

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.

What I want:

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.

I have got exhausted knowing what I have been doing wrong. It would be a great help if you help me find out. Thanks in advance.

[Note: I can't change the origin of rotation. It has to be top-left of the body forcing blue from hiding.]

$(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>

Maybe can use this https://stackoverflow.com/questions/12021522/move-and-limit-motion-of-a-div-inside-an-other-div or this https://www.webpagefx.com/blog/web-design/bouncing-a-ball-around-with-html5-and-javascript/ — Robert Negreanu, Jun 17 '17 at 23:54
Is there something missing in my answer I can add or adjust, for you to accept? ... or it simply didn't work? — Asons, Oct 15 '17 at 10:13

score 1 · Accepted Answer · answered Jun 18 '17 at 10:35

Here is the basic setup to do that. The main trick is to first rotate and then re-position.

Now you can elaborate with the amount of degree and x/y movement to get the exact rotation/position.

I added more steps when I tested this and that will like will be needed to have it rotate smoother, and as well start the re-position earlier so it doesn't touch the edges, though those adjustments is somewhat time consuming so I leave them to you :)

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

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

1 Answers1