Buna? vreau ca nava din poza sa se invarte in jurul planetei dar nu stiu cum sa o fac... ma poate ajuta cineva? dau coroana (platforma scratch)
(nu vreau sa fac sa se invarta prin a schimba pozitia constumului si apoi sa schimb directia... vreau matematic)
Multumesc!
Răspunsuri la întrebare
planete.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--<link rel="stylesheet" href="styles.css"> -->
</head>
<body>
<div class="planetPosition">
<div class="far-orbit"></div>
<div class="near-orbit"></div>
<div class="mainPlanet">
<div class="smallPlanet mars">
<img src="https://image.flaticon.com/icons/svg/1146/1146343.svg">
</div>
<div class="smallPlanet saturn">
<img src="https://image.flaticon.com/icons/svg/1146/1146342.svg">
</div>
<div class="smallPlanet planet-x">
<img src="https://image.flaticon.com/icons/svg/1146/1146297.svg">
</div>
</div>
</div>
</body>
</html>
planete.css
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes spin-negative {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
body {
background-color: #333;
}
.planetPosition {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
width: 400px;
height: 400px;
justify-content: center;
align-items: center;
}
.far-orbit {
width: 100%;
height: 100%;
background-color: #afa5a53b;
border-radius: 50%;
}
.near-orbit {
width: 85%;
height: 85%;
background-color: #33333347;
position: absolute;
border-radius: 50%;
}
.mainPlanet {
position: absolute;
width: 70%;
height: 70%;
background-image: url(https://image.flaticon.com/icons/svg/814/814513.svg);
}
img {
width: 15%;
}
.smallPlanet {
width: 100%;
height: 100%;
position: absolute;
}
.mars {
animation: spin 12s linear 0s infinite;
}
.saturn {
animation: spin-negative 7s linear 0s infinite;
}
.planet-x {
animation: spin 9s linear 0s infinite;
}
.planet-x img {
top: -44px;
position: absolute;
}