Transform rotate and translate of circle img inside another img - css

Question

I am trying to animate a sun with the outer rays slowly rotating. I have two images: sun_inner and sun_outer. I use absolute positioning and transform:translate to center the inner sun within the container. However, when I try to rotate the inner sun (which has a smiley face) a few degrees it is not rotating along the center axis, and the inner sun is moving up and down.
Any help in getting the rotation of the inner sun to be centered within the container is appreciated!
As an example here is a fiddle: https://jsfiddle.net/4mcdLcus/
.sun-inner {
position: absolute;
left: 50%;
top: 50%;
/*
In the animation I apply translateY(-50%) translateX(-50%)
to keep the inner circle centered, which is not working.
If I have translateY(-50%) translateX(-50%) without the rotation
it is centered properly
*/
animation-name: sun_inner_rotate;
animation-duration: 10s;
animation-iteration-count: infinite;
transform-origin: 50% 50%;
}
.sun-inner img {
height: 150px;
width: 150px;
}
.sun-outer {
animation-name: sun_outer_rotate;
animation-duration: 30s;
animation-iteration-count: infinite;
width: 300px;
height: 300px;
}
.sun-outer img {
width: 300px;
height: 300px;
}
#keyframes sunrise {
0% {
bottom: -130vh;
}
100% {
bottom: 0;
}
}
#keyframes sun_inner_rotate {
0% {
transform: rotate(0deg) translateY(-50%) translateX(-50%);
;
}
33% {
transform: rotate(12deg) translateY(-50%) translateX(-50%);
}
66% {
transform: rotate(-26deg) translateY(-50%) translateX(-50%);
}
100% {
transform: rotate(10deg) translateY(-50%) translateX(-50%);
}
}
#keyframes sun_outer_rotate {
0% {
transform: rotate(0deg);
}
33% {
transform: rotate(360deg);
}
66% {
transform: rotate(-30deg);
}
100% {
transform: rotate(-360deg);
}
}
.sunContainer {
width: 300px;
height: 300px;
position: relative;
margin-left: 10%;
margin-top: 7%;
animation-iteration-count: 1;
animation-name: sunrise;
animation-duration: 1.5s;
display: flex;
justify-content: center;
align-items: center;
}
<div class="sunContainer">
<div class="sun-inner">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Compass_360_%28en%29.svg">
</div>
<div class="sun-outer">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Compass_360_%28en%29.svg">
</div>
</div>

Answer 1

No, you don't need to use two animations or do anything additional to the #keyframes that is already configured. All that is required is to only set the transform-origin properly for the inner element.
The inner element is originally positioned at top: 50% and left: 50% of the parent element (which in other words means that the top left of the inner element is at the center point of the parent). Afterwards it is vertically and horizontally centered using transform: translateX(-50%) translateY(-50%) trick.
So, when you rotate the element the transform-origin should be set as left top for the element to rotate around the center point of the parent. Only then it will remain perfectly centered.
.sun-inner {
position: absolute;
left: 50%;
top: 50%;
height: 150px;
width: 150px;
animation-name: sun_inner_rotate;
animation-duration: 10s;
animation-iteration-count: infinite;
transform-origin: left top; /* note the change */
}
.sun-inner img, .sun-outer img {
height: 100%;
width: 100%;
}
.sun-outer {
animation-name: sun_outer_rotate;
animation-duration: 30s;
animation-iteration-count: infinite;
width: 300px;
height: 300px;
}
#keyframes sunrise {
0% {
bottom: -130vh;
}
100% {
bottom: 0;
}
}
#keyframes sun_inner_rotate {
0% {
transform: rotate(0deg) translateY(-50%) translateX(-50%);
}
33% {
transform: rotate(12deg) translateY(-50%) translateX(-50%);
}
66% {
transform: rotate(-26deg) translateY(-50%) translateX(-50%);
}
100% {
transform: rotate(10deg) translateY(-50%) translateX(-50%);
}
}
#keyframes sun_outer_rotate {
0% {
transform: rotate(0deg);
}
33% {
transform: rotate(360deg);
}
66% {
transform: rotate(-30deg);
}
100% {
transform: rotate(-360deg);
}
}
.sunContainer {
width: 300px;
height: 300px;
position: relative;
margin-left: 10%;
margin-top: 7%;
animation-iteration-count: 1;
animation-name: sunrise;
animation-duration: 1.5s;
display: flex;
justify-content: center;
align-items: center;
}
<div class="sunContainer">
<div class="sun-inner">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Compass_360_%28en%29.svg">
</div>
<div class="sun-outer">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Compass_360_%28en%29.svg">
</div>
</div>
Alternately, you can invert the order in which the transforms are applied on the element. You can apply the rotate first on the element and then apply translateX and translateY on the rotated element. This will also keep it perfectly centered. (When multiple transforms are specified, the first one from the right is always executed first and the last one from right is always executed last).
.sun-inner {
position: absolute;
left: 50%;
top: 50%;
height: 150px;
width: 150px;
animation-name: sun_inner_rotate;
animation-duration: 10s;
animation-iteration-count: infinite;
transform-origin: 50% 50%;
}
.sun-inner img, .sun-outer img {
height: 100%;
width: 100%;
}
.sun-outer {
animation-name: sun_outer_rotate;
animation-duration: 30s;
animation-iteration-count: infinite;
width: 300px;
height: 300px;
}
#keyframes sunrise {
0% {
bottom: -130vh;
}
100% {
bottom: 0;
}
}
#keyframes sun_inner_rotate { /* note the change to the order */
0% {
transform: translateY(-50%) translateX(-50%) rotate(0deg);
}
33% {
transform: translateY(-50%) translateX(-50%) rotate(12deg);
}
66% {
transform: translateY(-50%) translateX(-50%) rotate(-26deg);
}
100% {
transform: translateY(-50%) translateX(-50%) rotate(10deg);
}
}
#keyframes sun_outer_rotate {
0% {
transform: rotate(0deg);
}
33% {
transform: rotate(360deg);
}
66% {
transform: rotate(-30deg);
}
100% {
transform: rotate(-360deg);
}
}
.sunContainer {
width: 300px;
height: 300px;
position: relative;
margin-left: 10%;
margin-top: 7%;
animation-iteration-count: 1;
animation-name: sunrise;
animation-duration: 1.5s;
display: flex;
justify-content: center;
align-items: center;
}
<div class="sunContainer">
<div class="sun-inner">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Compass_360_%28en%29.svg">
</div>
<div class="sun-outer">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Compass_360_%28en%29.svg">
</div>
</div>