so what i want to do is some title that rotates around but the image shouldnt be rotating, only thing that must rotate is the base of it to give a example maybe i can say hotline miami 1’s main menu. how can i make it happen can someone help me please?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation test</t
itle>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="purple">
<img src="purple.png" class="cabin">
</div>
<div class="white">
<img src="white.png" class="cabin">
</div>
</body>
</html>
styles.css
.purple {
width: 40%;
height: 40%;
position: absolute;
transform-origin: 50% 0%;
animation: purple 75s ease-in-out infinite;
z-index: -2;
}
.white {
width: 40%;
height: 40%;
position: absolute;
transform-origin: 50% 0%;
animation: white 75s ease-in-out infinite;
z-index: -1;
}
.white {
right: 50%;
top: 50%;
}
.purple {
right: 50.25%;
top: 50.75%;
}
body {
background-color: black;
}
@keyframes white {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes purple {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
i tried to rotate the image’s as normal but then i see the image is rotating around itself too so i researched internet but cant find anything useful so here i am asking you guys
New contributor
BDFDTWO is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.