i want to rotate my image/ or element right after it reached to its location given in keframe breakpoints.
rotation and animation are being applied together.
Here is HTML
<body>
<div class="container">
<div class="box"></div>
</div>
and here is the CSS.
.container {
background-color: lightgray;
height: 600px;
width: 800px;
margin: auto;
}
.box {
height: 100px;
width: 100px;
// background-image: url("car.png");
background-size:100px 100px;
position: relative;
top:40px; left: 620px;
animation: Glider infinite 5s ease-in-out;
}
#keyframes Glider {
0% {
top:40px; left:620px;
}
25% {
top:40px; left: 80px;
transform: rotate(-90deg);
}
50%{
top:400px; left: 80px;
transform: rotate(-180deg);
}
75%{
top:400px; left: 620px;
transform: rotate(-270deg);
}
100%{
top:40px; left: 620px;
transform: rotate(-360deg);
}
}
What i wanted to do is move image to top:40px; left: 80px; then stay rotate(-90deg) , after rotation applied move to next point.
Want this to happen on every turning point.
LINK: https://output.jsbin.com/hiyamirera/1
WHAT AM I MISSING?
You may try something like this. The idea is to force the same value of rotation in the frames so it won't rotate while translating and you change the rotation between 2 close frames.
.container {
background-color: lightgray;
height: 600px;
width: 800px;
margin: auto;
}
.box {
height: 100px;
width: 100px;
background: red;
position: relative;
top: 40px;
left: 620px;
animation: Glider infinite 5s ease-in-out;
}
#keyframes Glider {
0% {
top: 40px;
left: 620px;
transform: rotate(0);
}
25% {
top: 40px;
left: 80px;
transform: rotate(0);
}
28% {
transform: rotate(-90deg);
}
50% {
top: 400px;
left: 80px;
transform: rotate(-90deg);
}
53% {
transform: rotate(-180deg);
}
75% {
top: 400px;
left: 620px;
transform: rotate(-180deg);
}
78% {
transform: rotate(-270deg);
}
97% {
top: 40px;
left: 620px;
transform: rotate(-270deg);
}
100% {
transform: rotate(-360deg);
}
}
<div class="container">
<div class="box"></div>
</div>
Related
I have created a loader using loader.io and integrated the css and HTML in the angular application but my loader is not displayed on the center of the screen with backdrop as it should.
#keyframes spin {
0% { transform: rotate(0deg) }
50% { transform: rotate(180deg) }
100% { transform: rotate(360deg) }
}
.loader div {
position: absolute;
animation: spin 3.77s linear infinite;
width: 113.08px;
height: 113.08px;
top: 71.96px;
left: 71.96px;
border-radius: 50%;
box-shadow: 0 4.6259999999999994px 0 0 #20c997;
transform-origin: 56.54px 58.852999999999994px;
}
.loader-container {
width: 257px;
height: 257px;
display: inline-block;
overflow: hidden;
background: blue;
}
.loader {
width: 100%;
height: 100%;
position: relative;
transform: translateZ(0) scale(1);
backface-visibility: hidden;
transform-origin: 0 0; /* see note above */
}
.loader div { box-sizing: content-box; }
<div *ngIf="true" class="loader-container">
<div class="loader">
<div></div>
</div>
</div>
I want to bring the loader to the center.
.loader div {
position: absolute;
animation: spin 3.77s linear infinite;
width: 113.08px;
height: 113.08px;
top: 50%;
left: 50%;
border-radius: 50%;
box-shadow: 0 4.6259999999999994px 0 0 #20c997;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html>
<head>
<body>
<div class="centered">
<div *ngIf="true" class="loader-container">
<div class="loader">
<div></div>
</div>
</div>
</div>
<style>
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -moz-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
color:darkred;
}
#keyframes spin {
0% { transform: rotate(0deg) }
50% { transform: rotate(180deg) }
100% { transform: rotate(360deg) }
}
.loader div {
position: absolute;
animation: spin 3.77s linear infinite;
width: 113.08px;
height: 113.08px;
top: 71.96px;
left: 71.96px;
border-radius: 50%;
box-shadow: 0 4.6259999999999994px 0 0 #20c997;
transform-origin: 56.54px 58.852999999999994px;
}
.loader-container {
width: 257px;
height: 257px;
display: inline-block;
overflow: hidden;
background: blue;
}
.loader {
width: 100%;
height: 100%;
position: relative;
transform: translateZ(0) scale(1);
backface-visibility: hidden;
transform-origin: 0 0; /* see note above */
}
.loader div { box-sizing: content-box; }
</style>
</body>
</html>
I'm trying to get this circle loader working properly but having difficulty. I can do some basic animations, but this code which I found on CodePen is a bit above my pay-grade. I'm trying to use it to understand what's happening.
My objective is that the loader doesn't go all the way around the circumference of the circle. Say, only 68% of the way and stops. Or 98%. But I'm thus far unable to locate the property/value which determines how far the loader goes around the circle.
I've tried manipulating the keyframes on the right loader class to no avail as well as the transform-origin property. No dice.
Code:
#circle-loader-wrap {
overflow: hidden;
position: relative;
margin-top: -10px;
width: 200px;
height: 200px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1) inset;
background-color: blue;
border-radius: 200px;
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
#circle-loader-wrap:after {
content: '';
position: absolute;
left: 15px;
top: 15px;
width: 170px;
height: 170px;
border-radius: 50%;
background-color: green;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
#circle-loader-wrap div {
overflow: hidden;
position: absolute;
width: 50%;
height: 100%;
}
#circle-loader-wrap .loader {
position: absolute;
left: 100%;
top: 0;
width: 100%;
height: 100%;
border-radius: 1000px;
background-color: pink;
}
#circle-loader-wrap .left-wrap {
left: 0;
}
#circle-loader-wrap .left-wrap .loader {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
transform-origin: 0 50% 0;
-webkit-transform-origin: 0 50% 0;
animation: loading-left 20s infinite linear;
-webkit-animation: loading-left 20s infinite linear;
}
#circle-loader-wrap .right-wrap {
left: 50%;
}
#circle-loader-wrap .right-wrap .loader {
left: -100%;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
transform-origin: 100% 50% 0;
-webkit-transform-origin: 100% 50% 0;
animation: loading-right 20s infinite linear;
-webkit-animation: loading-right 20s infinite linear;
}
#keyframes loading-left {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(180deg);
}
100% {
transform: rotate(180deg);
}
}
#-webkit-keyframes loading-left {
0% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(180deg);
}
50% {
-webkit-transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(180deg);
}
}
#keyframes loading-right {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(180deg);
}
100% {
transform: rotate(180deg);
}
}
#-webkit-keyframes loading-right {
0% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(180deg);
}
}
<div class="container mt-5">
<div class="row">
<div class="col-3">
<div id="circle-loader-wrap">
<div class="left-wrap">
<div class="loader"></div>
</div>
<div class="right-wrap">
<div class="loader"></div>
</div>
</div>
</div>
</div>
</div>
I am pasting a snippet below which does what you want.
I have written my explanation of what's going on directly into the code comments next to the css rules that are doing the corresponding animation.
In case anything is still unclear, post a comment.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
#circle-loader-wrap {
overflow: hidden;
position: relative;
margin-top: -10px;
width: 200px;
height: 200px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1) inset;
background-color: blue;
border-radius: 200px;
transform: rotate(180deg);
}
#circle-loader-wrap:after {
content: '';
position: absolute;
left: 15px;
top: 15px;
width: 170px;
height: 170px;
border-radius: 50%;
background-color: green;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
#circle-loader-wrap div {
overflow: hidden;
position: absolute;
width: 50%;
height: 100%;
}
#circle-loader-wrap .loader {
position: absolute;
left: 100%;
top: 0;
width: 100%;
height: 100%;
border-radius: 1000px;
background-color: pink;
}
#circle-loader-wrap .left-wrap {
left: 0;
}
#circle-loader-wrap .left-wrap .loader {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
transform-origin: 0 50% 0;
animation: loading-left 5s infinite linear;
}
#circle-loader-wrap .right-wrap {
left: 50%;
}
#circle-loader-wrap .right-wrap .loader {
left: -100%;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
transform-origin: 100% 50% 0;
animation: loading-right 5s infinite linear;
}
#keyframes loading-left {
0% {
transform: rotate(0deg);
}
25%, 100% {
transform: rotate(180deg);
}
}
#keyframes loading-right {
0%, 25% {
transform: rotate(0deg);
}
50%, 100% {
/* the following is for the second half of the cicrle */
/* 180deg means one half of the cicle or 50% of the cicle */
/* So, 1% is gonna be 180/50 = 3.6deg */
/* If you want 68%, then you have 18% left for the second half of the circle */
/* To get 18%: 18x3.6 = 64.8deg */
transform: rotate(64.8deg);
/* Note: The transformation will happen between 25% and 50% of the total time which is 5 seconds in this case; So, it's gonna take 1.25 seconds. */
/* In other words, it will take the same amount of time as for the first half of the circle which will make the transformation in the second half appear to be slower because it has the same time to cover a much shorter distance */
/* Between 50% and 100% nothing happens. */
/* That's your "pause" in this animation although technically it's not a pause. */
}
}
</style>
<div class="container mt-1">
<div class="row">
<div class="col">
<p>68% in this case:</p>
<div id="circle-loader-wrap">
<div class="left-wrap">
<div class="loader"></div>
</div>
<div class="right-wrap">
<div class="loader"></div>
</div>
</div>
<p>The comments next to the corresponding css rules show how to adjust.</p>
</div>
</div>
</div>
Also note: I ripped out the vendor prefixes because you don't really need those nowadays for those css rules.
When I run this animation on Safari, there is a unwanted offset between wrapper and target, which should be at the center of wrapper. This code work well on others browsers including IE.
A strange thing is that the position of the target in developer tool is correct, but it just rendered with offset.
Here is the screenshot.
Is there any hack to take over this problem?
My safari version: 10.1.1
.wrapper{
height: 200px;
width: 200px;
background-color: red;
position: absolute;
left: 50%;
-webkit-transform: translate(-50%);
-ms-transform: translate(-50%);
transform: translate(-50%);
}
.target{
height: 250px;
width: 250px;
background-color: blue;
position: absolute;
left: 50%;
top: 0;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-animation: flip 2s;
animation: flip 2s;
}
#-webkit-keyframes flip{
0%{
height: 120px;
width: 120px;
top: 100%;
-webkit-transform: translate(-50%,0) rotateX(0deg);
transform: translate(-50%,0) rotateX(0deg);
}
100%{
height: 250px;
width: 250px;
top: 0;
-webkit-transform: translate(-50%,0) rotateX(360deg);
transform: translate(-50%,0) rotateX(360deg);
}
}
#keyframes flip{
0%{
height: 120px;
width: 120px;
top: 100%;
-webkit-transform: translate(-50%,0) rotateX(0deg);
transform: translate(-50%,0) rotateX(0deg);
}
100%{
height: 250px;
width: 250px;
top: 0;
-webkit-transform: translate(-50%,0) rotateX(360deg);
transform: translate(-50%,0) rotateX(360deg);
}
}
<div class="wrapper">
<div class="target"></div>
</div>
Thanks for any help!
.wrapper{
height: 200px;
width: 200px;
background-color: red;
position: relative;
margin: 0 auto;
}
.target{
height: 250px;
width: 250px;
background-color: blue;
position: absolute;
left: -30px;
right: 0;
-webkit-animation: flip 2s;
animation: flip 2s;
}
#keyframes flip{
0%{
height: 120px;
width: 120px;
top: 100%;
-webkit-transform: translate(60px,0) rotateX(0deg);
transform: translate(60px,0) rotateX(0deg);
}
100%{
height: 250px;
width: 250px;
top: 0;
-webkit-transform: translate(0px,0) rotateX(360deg);
transform: translate(0px,0) rotateX(360deg);
}
}
<div class="wrapper">
<div class="target"></div>
</div>
u can try this code..
I'm stuck on this for so long, why the car isn't swerve around the middle line with my animation? it seems like a bit off to the right?
.car {
width: 40px;
height: 60px;
background: #f00;
left: 50%;
transform: translate(-50%, 0);
animation: swerve 2s linear infinite;
top: 10%;
position: absolute;
}
#keyframes swerve {
0% {
transform: translate(-50%, 0);
}
50% {
transform: translate(50%, 0);
}
}
.road {
width: 200px;
background: black;
height: 500px;
display: block;
position: relative;
}
.road-middle {
border: 1px dotted #fff;
transform: rotate(90deg);
display: block;
position: relative;
top: 200px;
}
<div class='road'>
<span class="road-middle"></span>
<div class='car'></div>
</div>
Also how to control the length of the middle's border?
You use left:50% but don't calculate the car width. To fix this, you can alter the animation like this:
.car {
width: 40px;
height: 60px;
background: #f00;
left: 50%;
animation: swerve 2s linear infinite;
top: 10%;
position: absolute;
}
#keyframes swerve {
0% {
transform: translate(-50%, 0);
}
25% {
transform: translate(-100%, 0);
}
75% {
transform: translate(0%, 0);
}
100% {
transform: translate(-50%, 0);
}
}
.road{
width:200px;
background:black;
height:500px;
display:block;
position:relative;
}
.road-middle{
border: 1px dotted #fff;
transform: rotate(90deg);
display: block;
position: relative;
top: 200px;
}
<div class='road'>
<span class="road-middle"></span>
<div class='car'></div>
</div>
To control the length of the road-middle element, you can do the following:
.road-middle{
border: 1px dotted #fff;
display: block;
/* remove the rotation */
/*position the line */
position: absolute;
left:calc(50% - 1px);
/*controll the length of the line */
height:200px;
top:150px;
}
.car {
width: 40px;
height: 60px;
background: #f00;
left: 50%;
animation: swerve 2s linear infinite;
top: 10%;
position: absolute;
}
#keyframes swerve {
0% {
transform: translate(-50%, 0);
}
25% {
transform: translate(-100%, 0);
}
75% {
transform: translate(0%, 0);
}
100% {
transform: translate(-50%, 0);
}
}
.road{
width:200px;
background:black;
height:500px;
display:block;
position:relative;
}
.road-middle{
border: 1px dotted #fff;
display: block;
/* remove the rotation */
/*position the line */
position: absolute;
left:calc(50% - 1px);
/*controll the length of the line */
height:200px;
top:150px;
}
<div class='road'>
<span class="road-middle"></span>
<div class='car'></div>
</div>
the .car is not centered on the .road , change the css for the .car to this
.car{
left:0;
right:0;
margin:0 auto;
}
to change the length of the road-middle dotted line, do not rotate it, but instead make it with width:0 and height:100%, use this css :
.road-middle{
border: 1px dotted #fff;
display: block;
position: relative;
top: 0;
width:0px;
height:100%;
left:0;
right:0;
margin:0 auto;
}
See snippet below
.car {
width: 40px;
height: 60px;
background: #f00;
left: 0;
right:0;
margin:0 auto;
transform: translate(-50%, 0);
animation: swerve 2s linear infinite;
top: 10%;
position: absolute;
}
#keyframes swerve {
0% {
transform: translate(-50%, 0);
}
50% {
transform: translate(50%, 0);
}
}
.road {
width: 200px;
background: black;
height: 500px;
display: block;
position: relative;
}
.road-middle {
border: 1px dotted #fff;
display: block;
position: relative;
top: 0;
width:0px;
height:100%;
left:0;
right:0;
margin:0 auto;
}
<div class='road'>
<span class="road-middle"></span>
<div class='car'></div>
</div>
If you comment this 2 lines
transform: translate(-100%, 0);
animation: swerve 2s linear infinite;
you block isn't centered..
So replace by (or fix your first problem)
#keyframes swerve {
0% {
transform: translate(-100%, 0);
}
50% {
transform: translate(0%, 0);
}
}
Adding left: 50% aligns the leftmost edge of your element with the center. To align vertical center of your element with container's center you need to add negative margin equal to half that element's width, which pushes it back to left a little. E.g. here I have added margin-left: -20px; to your car and now it is in center:
.car {
width: 40px;
height: 60px;
background: #f00;
left: 50%;
transform: translate(-50%, 0);
animation: swerve 2s linear infinite;
top: 10%;
margin-left: -20px;
position: absolute;
}
#keyframes swerve {
0% {
transform: translate(-50%, 0);
}
50% {
transform: translate(50%, 0);
}
}
.road {
width: 200px;
background: black;
height: 500px;
display: block;
position: relative;
}
.road-middle {
border: 1px dotted #fff;
transform: rotate(90deg);
display: block;
position: relative;
top: 200px;
}
<div class='road'>
<span class="road-middle"></span>
<div class='car'></div>
</div>
Because you have mentioned the with 40px and moved the car from left by 50% which means your car is situated at 50%+40px to right. Try following code.
.car {
width: 18%;
height: 60px;
background: #f00;
left: 41%;
transform: translate(-50%, 0);
animation: swerve 2s linear infinite;
top: 10%;
position: absolute;
}
#keyframes swerve {
0% {
transform: translate(-50%, 0);
}
50% {
transform: translate(50%, 0);
}
}
.road {
width: 200px;
background: black;
height: 500px;
display: block;
position: relative;
}
.road-middle {
border: 1px dotted #fff;
transform: rotate(90deg);
display: block;
position: relative;
top: 200px;
}
<div class='road'>
<span class="road-middle"></span>
<div class='car'></div>
</div>
left: calc(50% - 20px);
You are not subtracting the car width
The following HTML5 and CSS3 animation is giving me two different issues and I've not been able to find previous answers to the question that have worked on my code. I'm curious if I'm doing something completely wrong here.
I have tried the solutions in this question, and this one with no results.
The two issues:
1.) The moon orbit transforms fine; the moon, as a child element, transforms as well. I attempt to apply the opposite transform but it doesn't appear to have any effect.
2.) I'm trying to alter the z-index so the moon goes behind the planet. The orbit border is temporary so no worries there but no matter what I set the z-index to I can't get the effect.
body {
height: 100%;
top: 0px;
bottom: 0px;
margin-top: 300px;
background-color: #143856;
}
.moonorbit {
position: relative;
top: -249px;
left: 309px;
width: 500px;
height: 500px;
border: 2px solid white;
border-radius: 50%;
-moz-transform: rotateX(75deg);
-webkit-transform: rotateX(75deg);
-o-transform: rotateX(75deg);
-ms-transform: rotateX(75deg);
transform: rotateX(75deg);
}
.mooncontainer {
position: absolute;
top: 175px;
left: 175px;
width: 150px !important;
height: 150px;
-moz-transform: rotateX(-75deg);
-webkit-transform: rotateX(-75deg);
-o-transform: rotateX(-75deg);
-ms-transform: rotateX(-75deg);
transform: rotateX(-75deg);
animation: moon-orbit 10s linear infinite;
}
.moon {
width: 150px !important;
height: 150px;
border-radius: 50%;
background: red url(img/planets_MOON.png) no-repeat;
background-size: cover;
animation: rotate 10s linear infinite;
}
.earth {
position: absolute;
width: 417px;
top: 100px;
left: 350px;
z-index: 0;
height: 209px;
}
.earth .planet {
/*width: 417px !important;
height: 417px;*/
width: 300px !important;
height: 300px;
background: yellow url(img/planets_EARTH.png) no-repeat;
background-size: cover;
border-radius: 50%;
margin: 0 auto;
}
/*Moon Orbit*/
#keyframes moon-orbit {
0% {
transform: rotateZ(0deg) translateX(250px);
}
100% {
transform: rotateZ(360deg) translateX(250px);
}
}
#keyframes rotate {
0% {
z-index: 5;
transform: rotateZ(0deg);
}
25% {
z-index: -5;
}
50% {
z-index: -5;
}
75% {
z-index: 5;
}
100% {
z-index: 5;
transform: rotateZ(-360deg);
}
}
<body>
<div class="earth">
<div class="planet"></div>
</div>
<div class="moonorbit">
<div class="mooncontainer">
<div class="moon"></div>
</div>
</div>
</body>
About your first issue, you are applying the technique ok. But there are 2 transformations that you need to correct, the one from the animation of the circle, that you have done, and the one from the inclination of the orbit (the rotateX(75deg)
This would be your demo with the correction applied
body {
height: 60%;
top: 0px;
bottom: 0px;
margin-top: 300px;
background-color: #143856;
}
.moonorbit {
position: relative;
top: -300px;
left: 209px;
width: 500px;
height: 500px;
border: 2px solid white;
border-radius: 50%;
transform: rotateX(75deg);
transform-style: preserve-3d;
}
.mooncontainer {
position: absolute;
top: 175px;
left: 175px;
width: 150px !important;
height: 150px;
-webkit-transform: rotateX(-75deg);
transform: rotateX(-75deg);
animation: moon-orbit 10s linear infinite;
transform-style: preserve-3d;
}
.moon {
width: 150px !important;
height: 150px;
border-radius: 50%;
background-color: white;
background-size: cover;
animation: rotate 10s linear infinite;
transform-style: preserve-3d;
}
.earth {
position: absolute;
width: 417px;
top: 100px;
left: 250px;
z-index: 0;
height: 209px;
}
.earth .planet {
/*width: 417px !important;
height: 417px;*/
width: 300px !important;
height: 300px;
background-color: lightgreen;
background-size: cover;
border-radius: 50%;
margin: 0 auto;
}
/*Moon Orbit*/
#keyframes moon-orbit {
0% {
transform: rotateZ(0deg) translateX(250px);
}
100% {
transform: rotateZ(360deg) translateX(250px);
}
}
#keyframes rotate {
0% {
transform: rotateZ(0deg) rotateX(-75deg); /* added rotateX(-75deg) to compensate */
}
100% {
transform: rotateZ(-360deg) rotateX(-75deg);
}
}
<div class="earth">
<div class="planet"></div>
</div>
<div class="moonorbit">
<div class="mooncontainer">
<div class="moon"></div>
</div>
</div>
About the second issue, your best bet is to work all the time in 3d, so it will be automatically solved. Another technique that makes it simpler is to chain the transforms. In my demo I have chained everything, so it's easier to get the control (and you have a simpler HTML
body {
height: 60%;
top: 0px;
bottom: 0px;
background-color: #143856;
}
.moon {
width: 150px;
height: 150px;
border-radius: 50%;
background: url(http://i.stack.imgur.com/L3IE5.jpg);
background-size: 120%;
background-position: center center;
animation: rotate 10s linear infinite;
transform-style: preserve-3d;
margin: auto;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}
.earth {
position: absolute;
width: 300px;
height: 300px;
background: url(http://i.stack.imgur.com/5sqwZ.jpg);
background-size: 140%;
background-position: center center;
border-radius: 50%;
margin: 100px 200px;
perspective: 1500px;
transform-style: preserve-3d;
}
#keyframes rotate {
0% {
transform: rotateX(-75deg) rotateZ(0deg) translateX(300px) rotateZ(0deg) rotateX(75deg);
}
100% {
transform: rotateX(-75deg) rotateZ(-360deg) translateX(300px) rotateZ(360deg) rotateX(75deg);
}
}
<div class="earth">
<div class="moon"></div>
</div>
Trying to fix this with z-index will end in failure 70% all the time. lol See what I did there? Anyways, your best bet is to do this with a keyframes. Create a keyframe to draw out your path and to be honest you will need other things that would take a while to explain but How about I'll post my code here and the DEMO and you will be able to see the difference?
HTML
<div id="universe" class="scale-stretched">
<div id="solar-system" class="earth">
<div id="earth" class="orbit">
<div class="pos">
<div class="planet"> </div>
</div>
</div>
<div id="sun"> </div>
</div>
</div>
CSS
#universe {
z-index: 1;
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
background-position: center 40%;
background-repeat: no-repeat;
background-size: cover; }
#solar-system {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d; }
.orbit {
position: absolute;
top: 50%;
left: 50%;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
transform-style: preserve-3d;
animation-name: orbit;
animation-iteration-count: infinite;
animation-timing-function: linear; }
.orbit .orbit {
animation-name: suborbit; }
.pos {
position: absolute;
top: 50%;
width: 2em;
height: 2em;
margin-top: -1em;
margin-left: -1em;
transform-style: preserve-3d;
animation-name: invert;
animation-iteration-count: infinite;
animation-timing-function: linear; }
#sun, .planet, #earth{
position: absolute;
top: 50%;
left: 50%;
width: 1em;
height: 1em;
margin-top: -0.5em;
margin-left: -0.5em;
border-radius: 50%;
transform-style: preserve-3d; }
#sun {
background-color: #FB7209;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 0 0 60px rgba(255, 160, 60, 0.4); }
.planet {
background-color: #202020;
background-repeat: no-repeat;
background-size: cover;
animation-iteration-count: infinite;
animation-timing-function: linear; }
.ring {
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%; }
#earth {
z-index: 8; }
#sun {
z-index: 1; }
#keyframes orbit {
0% {
transform: rotateZ(0deg); }
100% {
transform: rotateZ(-360deg); } }
#keyframes invert {
0% {
transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg); }
100% {
transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); } }
.view-3D #solar-system {
transform: rotateX(75deg); }
.view-3D #sun {
transform: rotateX(-90deg); }
#earth .pos,
#earth .planet,
#earth.orbit {
animation-duration: 12.00021s; }
#earth .orbit .pos,
#earth .orbit {
animation-duration: 0.89764s; }
.scale-stretched #sun {
font-size: 24em; }
.scale-stretched #earth .planet {
font-size: 3.92em; }
.scale-stretched #earth.orbit {
width: 56em;
height: 56em;
margin-top: -28em;
margin-left: -28em; }
body { background: #000; }
#sun { background: yellow; }
#earth .planet { background: blue; }
And some simple jQuery to get the 3D effect so it looks 2D but moves 3D
$(window).load(function(){
var body = $("body"),
universe = $("#universe"),
solarsys = $("#solar-system");
var init = function() {
body.removeClass('view-2D opening').addClass("view-3D").delay(2000).queue(function() {
$(this).removeClass('hide-UI').addClass("set-speed");
$(this).dequeue();
});
};
init();
});
Here is a DEMO
I think if you use my code you'll probably be better off than fixing yours. Just a suggestion ;)