围绕带有过渡的父元素旋转子元素-前端问题

Rotate child element around the parent element with transition(围绕带有过渡的父元素旋转子元素)

本文介绍了围绕带有过渡的父元素旋转子元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个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>

这篇关于围绕带有过渡的父元素旋转子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！