本文介绍了围绕带有过渡的父元素旋转子元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个CSS动画，我正在尝试使子元素围绕父元素旋转一定的度数。但是我不能让它绕父原点旋转，也不能让它从正确的半径旋转，它似乎绕着一个看不见的更小的圆旋转。 下面是损坏的动画。我如何修复此问题？
.center-circle {
top:100px;
left:100px;
width: 180px;
height: 180px;
border:1px solid black;
border-radius: 100%;
position: relative;
}
.quarter-circle {
width:65px;
height:65px;
position: absolute;
top: 0%;
left: 50%;
border:1px solid #F28B46;
border-radius: 100%;
animation: spin-back 2s ease-in-out;
-webkit-transform-origin: 0% 50%;
}
@-webkit-keyframes spin-back {
0% {
transform:rotate(-120deg);
}
100% {
transform:rotate(0deg);
}
}<div class="center-circle">
<div class="quarter-circle"></div>
</div>JSFiddle
推荐答案
可以通过在开始时将较小的圆设置在父圆之外(使用<[2-0]，left)，然后将transform-origin设置为父圆的半径+较小圆的半径，来实现此动态观察动画。这是因为旋转中心应位于较大圆的中心，较小圆的左上角偏移其半径的总和距离。
当我们将transform-origin设置为0% 50%时，50%是较小圆高度(即32.5px)的一半，因此旋转直径和旋转围绕较小的假想圆发生。而我们实际需要的是让它绕着更大的圆运动，所以想象中的圆半径必须更大。
.center-circle {
position: relative;
top: 100px;
left: 100px;
width: 180px;
height: 180px;
border: 1px solid black;
border-radius: 100%;
}
.quarter-circle {
position: absolute;
width: 65px;
height: 65px;
top: -32.5px;
left: -32.5px;
border: 1px solid #F28B46;
border-radius: 100%;
transform: rotate(-45deg);
animation: spin-back 2s ease-in-out forwards;
transform-origin: 122.5px 122.5px;
}
@keyframes spin-back {
0% {
transform: rotate(-45deg);
}
100% {
transform: rotate(135deg);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="center-circle">
<div class="quarter-circle"></div>
</div>下面的代码片断响应更灵敏一些(在我看来也更好一些)，但是它仍然需要将父代的半径硬编码到
transform-origin中。在此代码段中，较小圆的左上角与父代的中心圆的偏移量略有不同(与前一代码段相比)，因此transform-origin计算也不同。
.center-circle {
position: relative;
top: 100px;
left: 100px;
width: 180px;
height: 180px;
border: 1px solid black;
border-radius: 100%;
}
.quarter-circle {
position: absolute;
width: 80px;
height: 80px;
top: 50%;
left: 0%;
border: 1px solid #F28B46;
border-radius: 100%;
transform: translateX(-100%) translateY(-50%) rotate(0deg);
animation: spin-back 2s ease-in-out forwards;
transform-origin: calc(100% + 90px) 40px; /* 90px is radius of the parent */
}
@keyframes spin-back {
0% {
transform: translateX(-100%) translateY(-50%) rotate(0deg);
}
100% {
transform: translateX(-100%) translateY(-50%) rotate(180deg);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="center-circle">
<div class="quarter-circle"></div>
</div>这篇关于围绕带有过渡的父元素旋转子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！