css旋转动画定义中心,旋转时它的旋转中心位置如何 - CSS动画

0

我修改了动画，并增加了transform-origin的微调：d

.spinner-animation{

width: 500px;

height: 500px;

position: relative;

background: gray;

}

.spinner-animation > .spinner{

width: 400px;

height: 400px;

position: absolute;

left: 50%;

top: 50%;

transform-origin: top left;

transform: translate(-50%,-50%);

border-radius: 50%;

box-shadow: inset 3px 3px 3px red;

animation: spinner 1.2s linear infinite;

}

.spinner-animation > .content{

display: inline-block;

width: 300px;

height: 300px;

border-radius: 50%;

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%,-50%);

background-color: black;

text-align: center;

line-height: 300px;

color: