使用CSS围绕圆圈旋转图像的问题[重复]答案

【问题标题】：Problem with rotating a image around a circle with CSS [duplicate]使用CSS围绕圆圈旋转图像的问题[重复]
【发布时间】：2020-09-30 18:12:08
【问题描述】：

我在旋转小圆盘时遇到问题包含围绕一个大圆圈的图像的圆圈我也会旋转图像，这是不需要的行为。请参考下面的sn-p。

.big-circle {
    position:relative;
    border: 2px solid #d87272;
    border-radius: 50%;
    width: 500px;
    height: 500px;
    
}

.small-circle {
    position: absolute;
    left: calc(50% - 41px);
    top: calc(50% - 41px);
    height: 82px;
    width: 82px;
    border: 2px solid #d87272;
    border-radius: 50%;
}

.small-circle:nth-child(1) {
    transform: translateX(250px);
}

.small-circle:nth-child(2) {
    transform: rotate(90deg) translateX(250px);
}

.small-circle:nth-child(3) {
    transform: rotate(180deg) translateX(250px);
}

.small-circle:nth-child(4) {
    transform: rotate(270deg) translateX(250px);
}

.small-circle img{
    width: 100%;
    border-radius: 50%;
}

<div class="big-circle">
        <a href="#" class="small-circle">
            <img src="https://via.placeholder.com/82" alt=""></a>
        <a href="#" class="small-circle">
            <img src="https://via.placeholder.com/82" alt=""></a>
        <a href="#" class="small-circle">
            <img src="https://via.placeholder.com/82" alt=""></a>
        <a href="#" class="small-circle">
            <img src="https://via.placeholder.com/82" alt=""> </a>
</div>

【问题讨论】：

我会说，为什么还要轮换它们呢？只需使用 translateX AND translate Y 将它们轻推到位。

标签： html css

【解决方案1】：

你有几个选择：

通过在平移后应用反向旋转来撤消旋转：

.big-circle {
  position: relative;
  border: 2px solid #d87272;
  border-radius: 50%;
  width: 500px;
  height: 500px;
}

.small-circle {
  position: absolute;
  left: calc(50% - 41px);
  top: calc(50% - 41px);
  height: 82px;
  width: 82px;
  border: 2px solid #d87272;
  border-radius: 50%;
}

.small-circle:nth-child(1) {
  transform: translateX(250px);
}

.small-circle:nth-child(2) {
  transform: rotate(90deg) translateX(250px) rotate(-90deg);
}

.small-circle:nth-child(3) {
  transform: rotate(180deg) translateX(250px) rotate(-180deg);
}

.small-circle:nth-child(4) {
  transform: rotate(270deg) translateX(250px) rotate(-270deg);
}

.small-circle img {
  width: 100%;
  border-radius: 50%;
}

<div class="big-circle">
  <a href="#" class="small-circle">
    <img src="https://via.placeholder.com/82" alt=""></a>
  <a href="#" class="small-circle">
    <img src="https://via.placeholder.com/82" alt=""></a>
  <a href="#" class="small-circle">
    <img src="https://via.placeholder.com/82" alt=""></a>
  <a href="#" class="small-circle">
    <img src="https://via.placeholder.com/82" alt=""> </a>
</div>

只翻译；不应用轮换

.big-circle {
  position: relative;
  border: 2px solid #d87272;
  border-radius: 50%;
  width: 500px;
  height: 500px;
}

.small-circle {
  position: absolute;
  left: calc(50% - 41px);
  top: calc(50% - 41px);
  height: 82px;
  width: 82px;
  border: 2px solid #d87272;
  border-radius: 50%;
}

.small-circle:nth-child(1) {
  transform: translateX(250px);
}

.small-circle:nth-child(2) {
  transform: translateY(-250px);
}

.small-circle:nth-child(3) {
  transform: translateX(-250px);
}

.small-circle:nth-child(4) {
  transform: translateY(250px);
}

.small-circle img {
  width: 100%;
  border-radius: 50%;
}

<div class="big-circle">
  <a href="#" class="small-circle">
    <img src="https://via.placeholder.com/82" alt=""></a>
  <a href="#" class="small-circle">
    <img src="https://via.placeholder.com/82" alt=""></a>
  <a href="#" class="small-circle">
    <img src="https://via.placeholder.com/82" alt=""></a>
  <a href="#" class="small-circle">
    <img src="https://via.placeholder.com/82" alt=""> </a>
</div>

当然，这些都是针对您的问题的具体情况而定的。如果您需要使圆圈具有响应性，或者需要比简单地按原样定位四个圆圈更复杂的事情，则需要多花点心思来定位它们。

【讨论】：

我喜欢第二个选项。你对让圈子做出响应有什么想法？任何的想法。非常感谢您的帮助。
由于翻译没有参考父元素的大小，如果您担心调整大圆圈的大小，像 Richard Hunter 的答案这样的解决方案会更合适。如有必要，您还可以使用 JS 来确定平移/旋转值。

【解决方案2】：

我会用百分比值绝对定位所有小圆圈，然后使用翻译进行调整。另一个好处是响应速度更快。您可以调整大圆圈的大小，小圆圈仍然可以正确定位。您甚至可以将大圆圈更改为椭圆。

.big-circle {
  position: relative;
  border: 2px solid #d87272;
  border-radius: 50%;
  width: 400px;
  height: 400px;
  margin-left: 200px;
  margin-top: 100px;
}

.small-circle {
  position: absolute;
  height: 82px;
  width: 82px;
  border: 2px solid #d87272;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.small-circle:nth-child(1) {
  left: 50%;
  top: 0;
}

.small-circle:nth-child(2) {
  top: 50%;
  left: 100%;
}

.small-circle:nth-child(3) {
  left: 50%;
  top: 100%;
}

.small-circle:nth-child(4) {
  left: 0;
  top: 50%;
}

.small-circle img {
  width: 100%;
  border-radius: 50%;
}

<div class="big-circle">
  <a href="#" class="small-circle">
    <img src="https://via.placeholder.com/82" alt=""></a>
  <a href="#" class="small-circle">
    <img src="https://via.placeholder.com/82" alt=""></a>
  <a href="#" class="small-circle">
    <img src="https://via.placeholder.com/82" alt=""></a>
  <a href="#" class="small-circle">
    <img src="https://via.placeholder.com/82" alt=""> </a>
</div>

【讨论】：