如何使用CSS或JQuery更改连续旋转的元素的位置(无位置:绝对)?

Question

这是我的JSFiddle。

问题出在哪里？

我有两个<div>，即红色和蓝色类。红色是 只是为了表示蓝色类的原始位置。休息一切，我们是 只关注蓝色。

现在，当我hover蓝色时，它开始连续旋转，直到 无限。当它的旋转大约超过95 度时，我们 可以看到蓝色类的某些部分从身体的左侧出来。 同样，当它在旋转过程中到达上半部分时，它是某个部分 从身体的上侧出去。

我想要什么：

我想要的是，当蓝色开始向左隐藏时，它应该 从左推，以便向右移动，从而 避免被隐藏。同样，它应该从 逐渐上顶，因为它开始隐藏在上侧。

您可以申请margin甚至translate来更改位置 的蓝色。但是，在这种情况下，绝对位置是不允许的。所以，我必须坚持下去。对此感到抱歉。

我已经筋疲力尽，知道我做错了什么。如果你帮我找出答案，那将是一个很大的帮助。提前谢谢。

[注意：我无法更改旋转的原点。它必须在身体的左上角，迫使蓝色隐藏起来。

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