Following is my code, I have set line center as rotate pivot transform-origin 50px 50px, but the line doesn't rotate with its center
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- disable request favicon-->
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<!--mobile friendly-->
<meta name="viewport" content="width=device-width, user-scalable=yes">
</head>
<body>
<style>
.c {
transform: translate(200px, 200px);
}
.it {
animation: spin 2s linear infinite;
}
@keyframes spin {
/*50% {*/
/* transform: rotate(180deg);*/
/*}*/
50% {
transform-origin: 50px 50px;
transform: rotate(360deg);
}
}
</style>
<svg class="c" width="100" height="100">
<!-- <line x1="50" y1="50" x2="50" y2="100" stroke="black"/>-->
<path d="M 0 50 L 100 50" stroke="black" class="it">
</path>
</svg>
<script type="module">
</script>
</body>
</html>
I find the reason, the reason is I put transform-origin in keyframe it's frame 0 transform-origin is default but in frame transform-origin is 50px 50px, it cause element transform, so the solution is set transform-origin in element class not keyframe; following is correct code
<style>
.c {
transform: translate(200px, 200px);
}
.it {
animation: rotate 2s linear infinite;
transform-origin: 50px 50px;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
</style>
<svg class="c" width="100" height="100">
<path d="M 0 50 L 100 50" stroke="black" class="it"></path>
</svg
I believe you mean you want it to spin around the center? Maybe rethink the approach - make a div with a line up it's center and then just rotate the div and set overflow to hidden ? You could even use an image with a line up its top center and make that image spin. Check out this code.
HTML:
<div class="div1">
<div class="div2">
<div class="div3">
</div>
<div class="div4">
</div>
<div class="div3">
</div>
</div>
<div class="div2">
</div>
</div>
CSS:
.div1 {
height: 400px;
width: 400px;
background-color: red;
animation-name: spin;
animation-duration: 3000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
overflow-x: hidden;
overflow-y: hidden;
}
.div2 {
height: 50%;
width: 100%;
background-color: white;
display: flex;
}
.div3 {
height: 100%;
width: 49.5%;
background-color: white;
}
.div4 {
height: 100%;
width: 1%;
background-color: black;
}
@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
Codepen to see it in action: https://codepen.io/adamdolson/pen/vYREQMY