|
|

楼主 |
发表于 2022-4-8 19:08
|
显示全部楼层
完整代码:
- <style>
- .stage{
- margin: auto;
- position: relative;
- width: 760px;
- height: 560px;
- background: #000;
- perspective: 3000px;
- perspective-origin: 50% 50%;
- }
- .circle {
- position: absolute;
- left: calc(50% - 150px);
- top: calc(50% - 150px);
- width: 300px;
- height: 300px;
- transform-style: preserve-3d;
- animation: rot 10s linear infinite;
- }
- .circle div {
- position: absolute;
- width: 100%;
- height: 100%;
- border: 1px solid olive;
- border-radius: 50%;
- }
- .circle div:nth-child(1){ transform:rotateY(0deg);}
- .circle div:nth-child(2){ transform:rotateY(30deg);}
- .circle div:nth-child(3){ transform:rotateY(60deg);}
- .circle div:nth-child(4){ transform:rotateY(90deg);}
- .circle div:nth-child(5){ transform:rotateY(120deg);}
- .circle div:nth-child(6){ transform:rotateY(150deg);}
- @keyframes rot{
- 0%{ transform: rotateZ(30deg) rotateY(0turn);}
- 100%{ transform: rotateZ(30deg) rotateY(1turn);}
- }
- </style>
- <div class="stage">
- <div class="circle">
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- </div>
- </div>
复制代码
|
|