css如何设置图转30度,使用CSS实现左右30度的摆钟

利用只是点：animation、transform、transform-origin，摆动位置统一，就会实现同角度摆动。

代码实现：

#box{

width:300px;

height:300px;

border: 1px solid rgba(0, 140, 255, 0.623);

position: relative;

}

.center-circle{

width:20px;

height:20px;

background-color:rgb(216, 166, 28);

border-radius: 10px;

position: absolute;

top:0;

left:0;

bottom: 0;

right: 0;

margin: auto;

}

.plate-circle{

width:48px;

height:48px;

border-radius: 50%;

background-color: rgb(216, 166, 28);

position: absolute;

top:276px;

left:126px;

animation: pendulum-animation 4s linear infinite;

/*

transform-origin改变被转换元素的位置，默认值：50% 50% 0

将摆盘的转换位置定位与center-circle的中心的重合

*/

transform-origin: 50% -127px;

}

.connecting-line{

width:4px;

height:150px;

background-color: rgb(216, 166, 28);

position:absolute;

top: 50%;

left: 148px;

animation: pendulum-animation 4s linear infinite;

/*将摆盘的转换位置定位与center-circle的中心的重合*/

transform-origin: 50% 0;

}

@keyframes pendulum-animation{

0% {transform: rotate(0deg);}

25% {transform:rotate(-30deg)}

50% {transform: rotate(0deg);}

75% {transform: rotate(30deg);}

100% {transform: rotate(0deg);}

}