Can anyone tell me why is my div element moving around when I only want it to rotate? As you can see it it is like its rotating around something else. I have tried to fix it with transform-origin and transform-box but it doesnt work...
Here is the code:
#demo3 {
font-size: 2em;
font-family: Helvetica, Arial, sans-serif;
color: black;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
animation: rotation 15s infinite linear;
transform-origin: center;
transform-box: fill-box;
}
@keyframes rotation {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}<!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" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<div id="demo3">We are Simplifix. We make design simple.</div>
<script src="https://cdn.jsdelivr.net/npm/circletype@2.3.0/dist/circletype.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
new CircleType(document.getElementById("demo3"));
</script>
</body>
</html>