Problem with rotating a image around a circle with CSS

Question

I have a problem when rotating a small circle that contains the image around a big circle i get the image rotated as well which is unwanted behaviour. Please refer to the snippet below.

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

I would say, why bother rotating them? Just use translateX AND translate Y to nudge them into position. — Richard Hunter, Sep 30 '20 at 18:28

chazsolo · Accepted Answer · 2020-09-30T18:39:42.330

You have a couple options:

Undo the rotation by applying the inverse rotation after translation:

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

Only translate; do not apply a rotation

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

Granted, these are quite specific to the specifics of your question. If you need the circle to be responsive, or for something more involved than simply positioning the four circles as-is, a little more thought would be necessary for positioning them.

I like the second option. What is your thoughts on making circles responsive ? Any idea. I appreciate so much for your help. — Kenzo, Sep 30 '20 at 18:46
Since translations have no reference to the size of the parent element, a solution like Richard Hunter's answer would be better suited if you were concerned about resizing the big circle. You could also use JS, if necessary, to determine the translation/rotation values. — chazsolo, Sep 30 '20 at 18:54

Richard Hunter · Answer 2 · 2020-10-02T00:25:21.117

I would position all the small circles absolutely with percentage values then adjust using translations. An added benefit is this is a bit more responsive. You can adjust the size of the large circles and the smaller circles will still be positioned correctly. You can even change the large circle to an ellipse.

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

Problem with rotating a image around a circle with CSS

2 Answers2