如何使用CSS调整旋转半径大小

Question

如何调整球旋转半径的大小，使其接触橙色容器边框

.bg {

    background-color: blue;

    display: flex;

    align-items: center;

    justify-content: center;

}

.ball-container {

    position: relative;

    display:flex;

    justify-content:center;

    align-items:center;

    background-color: orange;

    width: 250px;

    height: 250px;

}

.ball {

    position: absolute;

    width: 24px;

    height: 24px;

    background-color: white;

    border-radius: 50%;

    top: 125px - 12px;

    left: 125px - 12px;

    animation-name: ball_moves;

    animation-duration: 1.5s;

    animation-timing-function: ease-in-out;

    animation-iteration-count: infinite;

    animation-direction: initial;

}

.ball:nth-child(1) {

    transform-origin: top left;

}

.ball:nth-child(2) {

    transform-origin: top right;

}

.ball:nth-child(3) {

    transform-origin: bottom left;

}

.ball:nth-child(4) {

    transform-origin: bottom right;

}

@keyframes ball_moves {

    0% {

        transform: rotateZ(0);

    }

    100% {

        transform: rotateZ(360deg);

    }

}

<div class="bg">

    <div class="ball-container">

        <div class="ball"></div>

        <div class="ball"></div>

        <div class="ball"></div>

        <div class="ball"></div>

    </div>

</div>

Answer 1

使用CSS变量定义一个独特的偏移量，可以使用transform-origin控制所有圆圈：.bg {&nbsp; &nbsp; background-color: blue;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; margin:10px;}.ball-container {&nbsp; &nbsp; --d:35px; /* adjust this like you want (you can even use % value)*/&nbsp; &nbsp; /*&nbsp;&nbsp; &nbsp; &nbsp; 1) we first find the middle of each small square&nbsp; &nbsp; &nbsp; &nbsp; the size is 250/2=125 so we translate by (125-24)/2 = 50.5px&nbsp; &nbsp; &nbsp; &nbsp; this will put the origin in the middle and give us a rotation&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; following the "circumscribe" circle so we the circle will go outside&nbsp; &nbsp; &nbsp; 2) we need to decrease it to keep the rotation inside&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;the calculate is a bit complex but we decrease by around 15px to have 35px&nbsp; &nbsp; */&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; display:flex;&nbsp; &nbsp; justify-content:center;&nbsp; &nbsp; align-items:center;&nbsp; &nbsp; background:&nbsp;&nbsp; &nbsp; &nbsp; linear-gradient(red,red) center/100% 1px,&nbsp; &nbsp; &nbsp; linear-gradient(red,red) center/1px 100%,&nbsp; &nbsp; &nbsp; orange;&nbsp; &nbsp; background-repeat:no-repeat;&nbsp; &nbsp; width: 250px;&nbsp; &nbsp; height: 250px;}.ball {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; width: 24px;&nbsp; &nbsp; height: 24px;&nbsp; &nbsp; background-color: white;&nbsp; &nbsp; border-radius: 50%;&nbsp; &nbsp; animation-name: ball_moves;&nbsp; &nbsp; animation-duration: 1.5s;&nbsp; &nbsp; animation-timing-function: ease-in-out;&nbsp; &nbsp; animation-iteration-count: infinite;&nbsp; &nbsp; animation-direction: initial;}.ball:nth-child(1) {&nbsp; &nbsp; transform-origin: calc(-1*var(--d)) calc(-1*var(--d));}.ball:nth-child(2) {&nbsp; &nbsp; transform-origin: calc(-1*var(--d)) calc(100% + var(--d));}.ball:nth-child(3) {&nbsp; &nbsp; transform-origin: calc(100% + var(--d)) calc(-1*var(--d));}.ball:nth-child(4) {&nbsp; &nbsp; transform-origin: calc(100% + var(--d)) calc(100% + var(--d));}@keyframes ball_moves {&nbsp; &nbsp; 0% {&nbsp; &nbsp; &nbsp; &nbsp; transform: rotateZ(0);&nbsp; &nbsp; }&nbsp; &nbsp; 100% {&nbsp; &nbsp; &nbsp; &nbsp; transform: rotateZ(360deg);&nbsp; &nbsp; }}<div class="bg">&nbsp; &nbsp; <div class="ball-container">&nbsp; &nbsp; &nbsp; &nbsp; <div class="ball"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="ball"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="ball"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="ball"></div>&nbsp; &nbsp; </div></div><div class="bg">&nbsp; &nbsp; <div class="ball-container" style="--d:100%;"> <!-- 100% = 24px (size of circle) -->&nbsp; &nbsp; &nbsp; &nbsp; <div class="ball"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="ball"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="ball"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="ball"></div>&nbsp; &nbsp; </div></div>使用另一种语法：.bg {&nbsp; &nbsp; background-color: blue;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; margin:10px;}.ball-container {&nbsp; &nbsp; --d:47px; /* adjust this like you want (you can even use % value)*/&nbsp; &nbsp; /*&nbsp;&nbsp; &nbsp; &nbsp; 1) we first find the middle of each small square&nbsp; &nbsp; &nbsp; &nbsp; the size is 250/2=125 so we translate by (125)/2 = 66.5px&nbsp; &nbsp; &nbsp; &nbsp; this will put the origin in the middle and give us a rotation&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; following the "circumscribe" circle so we the circle will go outside&nbsp; &nbsp; &nbsp; 2) we need to decrease it to keep the rotation inside&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;the calculate is a bit complex but we decrease by around 15px to have 47px&nbsp; &nbsp; */&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; display:flex;&nbsp; &nbsp; justify-content:center;&nbsp; &nbsp; align-items:center;&nbsp; &nbsp; background:&nbsp;&nbsp; &nbsp; &nbsp; linear-gradient(red,red) center/100% 1px,&nbsp; &nbsp; &nbsp; linear-gradient(red,red) center/1px 100%,&nbsp; &nbsp; &nbsp; orange;&nbsp; &nbsp; background-repeat:no-repeat;&nbsp; &nbsp; width: 250px;&nbsp; &nbsp; height: 250px;}.ball {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; width: 24px;&nbsp; &nbsp; height: 24px;&nbsp; &nbsp; background-color: white;&nbsp; &nbsp; border-radius: 50%;&nbsp; &nbsp; animation-name: ball_moves;&nbsp; &nbsp; animation-duration: 1.5s;&nbsp; &nbsp; animation-timing-function: ease-in-out;&nbsp; &nbsp; animation-iteration-count: infinite;&nbsp; &nbsp; animation-direction: initial;}.ball:nth-child(1) {&nbsp; &nbsp; transform-origin: calc(50% - var(--d)) calc(50% - var(--d));}.ball:nth-child(2) {&nbsp; &nbsp; transform-origin: calc(50% - var(--d)) calc(50% + var(--d));}.ball:nth-child(3) {&nbsp; &nbsp; transform-origin: calc(50% + var(--d)) calc(50% - var(--d));}.ball:nth-child(4) {&nbsp; &nbsp; transform-origin: calc(50% + var(--d)) calc(50% + var(--d));}@keyframes ball_moves {&nbsp; &nbsp; 0% {&nbsp; &nbsp; &nbsp; &nbsp; transform: rotateZ(0);&nbsp; &nbsp; }&nbsp; &nbsp; 100% {&nbsp; &nbsp; &nbsp; &nbsp; transform: rotateZ(360deg);&nbsp; &nbsp; }}<div class="bg">&nbsp; &nbsp; <div class="ball-container">&nbsp; &nbsp; &nbsp; &nbsp; <div class="ball"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="ball"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="ball"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="ball"></div>&nbsp; &nbsp; </div></div><div class="bg">&nbsp; &nbsp; <div class="ball-container" style="--d:200%;"> <!-- 100% = 48px (size of circle) -->&nbsp; &nbsp; &nbsp; &nbsp; <div class="ball"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="ball"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="ball"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="ball"></div>&nbsp; &nbsp; </div></div>