I was able to rotate 4 images around a circle border and able to stop one image at every 45 degrees. But I cant increase the size of that image which stops at 90 degrees to website and should be able to show the content of respective image when they come at 90 degrees. give me a answer to get out of this using html, css and JavaScript.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./rotate.css">
<script src="./rotate.js"></script>
</head>
<body>
<div id="parent-circle">
<div class="circle blue">vinay</div>
<div class="circle pink">vinay</div>
<div class="circle lime">vinay</div>
<div class="circle orange">vinay</div>
</div>
<div class="mt-5 content pt-2 ">
<h1>Health Record</h1>
<p class="w-75">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum, doloremque!</p>
</div>
</body>
</html>
CSS Code
body {
width: 90vw;
height: 90vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
body #parent-circle {
position: relative;
width: 20vw;
height: 20vw;
border: 0.4vw solid rgba(0, 0, 0, 0.4);
border-radius: 50%;
transform: rotate(0deg);
transition: transform 0.7s linear;
animation: rotate 14s infinite linear;
}
body #parent-circle .circle {
display: block;
position: absolute;
width: 30%;
height: 30%;
margin: -14%;
border-radius: 50%;
top: 50%;
left: 50%;
}
body #parent-circle .circle.blue {
background-color: #416ba9;
transform: translate(10vw);
}
body #parent-circle .circle.pink {
background-color: #e6427a;
transform: rotate(90deg) translate(10vw) rotate(-90deg);
}
body #parent-circle .circle.lime {
background-color: #cddb00;
transform: rotate(180deg) translate(10vw) rotate(-180deg);
}
body #parent-circle .circle.orange {
background-color: #e0592a;
transform: rotate(270deg) translate(10vw) rotate(-270deg);
}
.content {
margin-left: 20%;
}
@keyframes example {
0% {
width: 30%;
height: 30%;
}
100% {
width: 60%;
height: 60%;
}
}
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
12.5% {
-webkit-transform: rotate(90deg);
}
25% {
-webkit-transform: rotate(90deg);
}
37.5% {
-webkit-transform: rotate(180deg);
}
50% {
-webkit-transform: rotate(180deg);
}
62.5% {
-webkit-transform: rotate(270deg);
}
75% {
-webkit-transform: rotate(270deg);
}
87.5% {
-webkit-transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
