rotate animation render only half of the element - html

Question

I'm trying to animate a rotating gold ray of lights, below image is the achieved layout using html and css but when I tried to add a rotate animation, seems layout cut on half. Below code snippet is what is my attempt. Any help, ideas is greatly appreciated.
#import('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css');
body {
background: #ededed;
padding: 64px 0;
font-family: Roboto, sans-serif;
font-size: 12px
}
.banner {
max-width: 100%;
max-height: 100%;
-webkit-box-shadow: 0 10px 40px -6px rgba(0, 0, 0, .1);
-moz-box-shadow: 0 10px 40px -6px rgba(0, 0, 0, .1);
-o-box-shadow: 0 10px 40px -6px rgba(0, 0, 0, .1);
box-shadow: 0 10px 40px -6px rgba(0, 0, 0, .1)
}
.winners-intro {
background: #ededed;
z-index: 999
}
.winners-intro,
.winners-intro .winners-light {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0
}
.winners-intro .winners-light {
-webkit-animation-name: winners_light;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
animation-name: winners_light;
animation-duration: 10s;
animation-iteration-count: infinite
}
.winners-intro .winners-light .radial-light {
width: 100px;
height: 100px;
background: gold;
box-shadow: 1px 1px 100px 50px gold;
-webkit-box-shadow: 1px 1px 100px 50px gold;
-moz-box-shadow: 1px 1px 100px 50px gold;
-o-box-shadow: 1px 1px 100px 50px gold;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
position: absolute
}
.winners-intro .winners-light .light {
position: absolute;
background: gold;
height: 200vh;
width: 20px;
opacity: .5;
background: transparent;
background: -webkit-linear-gradient(bottom, transparent 27%, gold 50%, transparent 73%, transparent 90%, transparent);
background: linear-gradient(0deg, transparent 27%, gold 50%, transparent 73%, transparent 90%, transparent)
}
.winners-intro .winners-light .light:nth-child(2) {
transform: skewX(30deg)
}
.winners-intro .winners-light .light:nth-child(2),
.winners-intro .winners-light .light:nth-child(3) {
background: transparent;
background: -webkit-linear-gradient(bottom, transparent 27%, gold 50%, transparent 73%, transparent 90%, transparent);
background: linear-gradient(0deg, transparent 27%, gold 50%, transparent 73%, transparent 90%, transparent)
}
.winners-intro .winners-light .light:nth-child(3) {
transform: skewX(60deg)
}
.winners-intro .winners-light .light:nth-child(4) {
transform: skewX(90deg)
}
.winners-intro .winners-light .light:nth-child(4),
.winners-intro .winners-light .light:nth-child(6) {
background: transparent;
background: -webkit-linear-gradient(bottom, transparent 27%, gold 50%, transparent 73%, transparent 90%, transparent);
background: linear-gradient(0deg, transparent 27%, gold 50%, transparent 73%, transparent 90%, transparent)
}
.winners-intro .winners-light .light:nth-child(6) {
transform: skewX(-30deg)
}
.winners-intro .winners-light .light:nth-child(7) {
transform: skewX(-60deg);
background: transparent;
background: -webkit-linear-gradient(bottom, transparent 27%, gold 50%, transparent 73%, transparent 90%, transparent);
background: linear-gradient(0deg, transparent 27%, gold 50%, transparent 73%, transparent 90%, transparent)
}
.winners-intro .winners-light .light:nth-child(8) {
width: 100%!important;
height: 10px!important;
background: transparent;
background: -webkit-linear-gradient(left, transparent 10%, gold 50%, transparent 90%, transparent);
background: linear-gradient(90deg, transparent 10%, gold 50%, transparent 90%, transparent)
}
.winners-intro .winners-trophy {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 10
}
#-webkit-keyframes winners_light {
to {
transform: rotate(-1turn)
}
}
#keyframes clouds {
to {
transform: rotate(-1turn)
}
}
<div class="winners-intro">
<div>
<div class="winners-light">
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="radial-light"></div>
</div>
</div>
</div>

Answer 1

I would simplify the code like below where you will not have the issue:
body {
background: #ededed;
margin:0;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
height:100vh;
}
.light {
height: 100vmax;
width:100vmax;
background:
radial-gradient(circle ,rgba(255, 215, 0, 1 ) 8vmax,transparent 8vmax),
radial-gradient(circle ,rgba(255, 215, 0, 0.6)8vmax,transparent 17vmax),
linear-gradient(to bottom, transparent 10%,gold,transparent 90%) center/10px 100%,
linear-gradient(to right , transparent 10%,gold,transparent 90%) center/100% 10px;
background-repeat:no-repeat;
position:relative;
overflow:hidden;
animation:move 5s linear infinite;
}
.light:before,
.light:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:inherit;
background-size:0 0,0 0,10px 100%,100% 10px;
transform:rotate(30deg);
}
.light:after{
transform:rotate(-30deg);
}
#keyframes move {
to {
transform:rotate(1turn);
}
}
<div class="light"></div>