CODEWITHSUNDEEP
htmlcssanimation
G-Man
G-Man

Reputation: 11

CSS3 - Circle rotating skewed/incorrectly

My fiddle example:

https://jsfiddle.net/e4rL56ja/

For some reason my circle that I created is rotating incorrectly, this is a very strange issue, it's moving/bobbing around when I just want it to stay in an exact place.

Has anyone encountered an issue like this before?

I attempted to do stuff such as border-radius, but there was no luck there

I hope you guys can help out with my issue!

HTML:

<div class='circle rotating'>

</div>

CSS:

.circle {
  background: url(https://i.ibb.co/8j8nSns/example.png) no-repeat;
    width: 547px;
    height: 530px;
}

@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.rotating {
    -webkit-animation: rotating 1s linear infinite;
    -moz-animation: rotating 1s linear infinite;
    -ms-animation: rotating 1s linear infinite;
    -o-animation: rotating 1s linear infinite;
    animation: rotating 1s linear infinite;
}

Upvotes: 1

Views: 748

Answers (4)

Temani Afif
Temani Afif

Reputation: 272807

You image has a dimension of 547x530 that's and your circle is within this area but not centred 1. To fix this you can make the container to be 564x547. You add the difference 17px (547 - 530) on the right then you make the image aligned to the left and it will get centred in the container and it will rotate like you want.

There is also some pixel from the bottom that you need to consider to have a perfect centring:

.circle {
  background: url(https://i.ibb.co/8j8nSns/example.png) left bottom no-repeat;
  width: 564px;
  height: 536px;
  box-sizing: border-box;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotating {
  animation: rotating 1s linear infinite;
}
<div class='circle rotating'>

</div>

Or adjsut the alignment to the right top and make the box to be 530x530. This will trim the extra space from the image and keep only the circle

.circle {
  background: url(https://i.ibb.co/8j8nSns/example.png) right top no-repeat;
  width: 530px;
  height: 530px;
  box-sizing: border-box;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotating {
  animation: rotating 1s linear infinite;
}
<div class='circle rotating'>

</div>

1 To better illustrate the issue simply add border to the main image to see the gap on the left and bottom size:

img {
  max-width:100%;
  border:1px solid;
}
<img src="https://i.ibb.co/8j8nSns/example.png">

Upvotes: 0

Mubashar Rasheed
Mubashar Rasheed

Reputation: 77

You should be giving same height and width, Also try to use a proper centered png for circle. Don't forget to cover background too for .circle: background-size: cover;

Upvotes: 0

Marcus Parsons
Marcus Parsons

Reputation: 1803

The wobbling you're seeing is due to the height and width not being the same. A "perfect" circle will have the exact same height and width. I also changed the background so that it wasn't the image of the wobbling circle itself. And added a border-radius of 50%. You can clearly now see that the circle is rotating as it should.

https://jsfiddle.net/3gktzevm/

.circle {
    background: linear-gradient(to right, #333333, #dd1818);
    width: 530px;
    height: 530px;
    border-radius: 50%;
}

@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.rotating {
    -webkit-animation: rotating 1s linear infinite;
    -moz-animation: rotating 1s linear infinite;
    -ms-animation: rotating 1s linear infinite;
    -o-animation: rotating 1s linear infinite;
    animation: rotating 1s linear infinite;
}

Upvotes: 1

Mohit Gupta
Mohit Gupta

Reputation: 739

See this below code.... and see circel is rotating and see circle border also rotate.

.circle {
	width: 500px;
	height: 500px;
  background-color:red;
 border-radius: 50%;
border: 2px dashed blue;
}

@keyframes rotating {
	from {
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-ms-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
.rotating {
	-webkit-animation: rotating 1s linear infinite;
	-moz-animation: rotating 1s linear infinite;
	-ms-animation: rotating 1s linear infinite;
	-o-animation: rotating 1s linear infinite;
	animation: rotating 1s linear infinite;
}
<div class='circle rotating'>

</div>

Upvotes: 0

Related Questions