Problem beim Drehen eines Bildes um einen Kreis mit CSS [Duplikat]

Question

Ich habe ein Problem beim Drehen eines kleinen Kreises, der das Bild um einen großen Kreis enthält. Ich bekomme auch das Bild gedreht, was unerwünschtes Verhalten ist. Bitte beziehen Sie sich auf das folgende Snippet.

.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>

Answer 1

Sie haben ein paar Möglichkeiten:

1. Machen Sie die Drehung rückgängig, indem Sie nach der Translation die umgekehrte Drehung anwenden :

.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>

1. Nur übersetzen; Wenden Sie keine Drehung an

.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>

Zugegeben, diese sind sehr spezifisch für die Besonderheiten Ihrer Frage. Wenn Sie möchten, dass der Kreis reagiert, oder wenn etwas mehr involviert ist als nur die vier Kreise so zu positionieren, wie sie sind, ist ein wenig mehr Nachdenken erforderlich, um sie zu positionieren.

Answer 2

Ich würde alle kleinen Kreise absolut mit Prozentwerten positionieren und dann mithilfe von Übersetzungen anpassen. Ein zusätzlicher Vorteil ist, dass dies etwas reaktionsschneller ist. Sie können die Größe der großen Kreise anpassen und die kleineren Kreise werden weiterhin korrekt positioniert. Sie können den großen Kreis sogar in eine Ellipse ändern.

.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>