* {
margin:0;
padding:0;
}
body {
background:#000;
}
.container {
-webkit-perspective:1500px;
-moz-perspective:1500px;
-ms-perspective:1500px;
perspective:500px;
margin:auto;
width:700px;
height:600px;
}
.container .flabellum {
z-index:0;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
transform-style:preserve-3d;
transform-origin:50% 50%;
animation:flabellum 0.5s linear infinite;
width:600px;
height:480px;
}
.standBar {
position:absolute;
left:290px;
top:250px;
height:380px;
width:20px;
background:white;
border-radius:10px;
}
.flabellum .O {
background:white;
position:absolute;
height:20px;
width:20px;
border-radius:10px;
left:290px;
top:230px;
}
.f0,.f1,.f2,.f3,.f4,.f5 {
position:absolute;
height:40px;
width:300px;
background:radial-gradient(farthest-side,#fff 80%,#000000 10%,transparent 10%);
left:148px;
top:220px;
}
.f0 {
transform:rotatez(0deg) translatex(150px);
}
.f1 {
transform:rotatez(60deg) translatex(150px);
}
.f2 {
transform:rotatez(120deg) translatex(150px);
}
.f3 {
transform:rotatez(180deg) translatex(150px);
}
.f4 {
transform:rotatez(240deg) translatex(150px);
}
.f5 {
transform:rotatez(300deg) translatex(150px);
}
.container {
transform:rotatey(60deg)
}
@keyframes flabellum {
0% {
transform:rotatez(0deg)
}
50% {
transform:rotatez(180deg)
}
100% {
transform:rotatez(360deg)
}