CSS로 원을 중심으로 이미지 회전 문제 [중복]

Question

큰 원 주위에 이미지가 포함 된 작은 원을 회전 할 때 문제가 있습니다. 원치 않는 동작 인 이미지도 회전됩니다. 아래 스 니펫을 참조하십시오.

.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

몇 가지 옵션이 있습니다.

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>

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

물론, 이것들은 귀하의 질문에 대한 구체적인 내용입니다. 원이 반응 할 필요가 있거나 단순히 네 개의 원을있는 그대로 배치하는 것보다 더 관련이있는 경우, 배치를 위해 좀 더 많은 생각이 필요합니다.

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