body {
background-color:#1e0059;
height:100vh;
margin:0;
overflow:hidden;
-webkit-perspective:5em;
perspective:5em;
}
body::after {
background-color:inherit;
border-radius:50%;
box-shadow:0 0 2em 2em #1e0059;
content:"";
height:1em;
left:50%;
position:absolute;
top:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
width:1em;
}
.cylinder {
-webkit-animation-iteration-count:infinite;
animation-iteration-count:infinite;
-webkit-animation-name:tunnel;
animation-name:tunnel;
-webkit-animation-timing-function:linear;
animation-timing-function:linear;
left:50%;
position:absolute;
top:50%;
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-transform:rotatex(90deg) rotatey(0) translatey(-25em);
transform:rotatex(90deg) rotatey(0) translatey(-25em);
}
.cylinder:nth-child(1) {
-webkit-animation-duration:8s;
animation-duration:8s;
}
.cylinder:nth-child(2) {
-webkit-animation-duration:4s;
animation-duration:4s;
}
.side {
background-image:url(http://www.jq22.com/img/cs/500x500-1.png);
background-size:32em 10em;
-webkit-filter:hue-rotate(-11.25deg);
filter:hue-rotate(-11.25deg);
height:40em;
position:absolute;
-webkit-transform-origin:0;
transform-origin:0;
width:2em;
}
.side:nth-child(1) {
background-position:-2em;
-webkit-transform:rotatey(22.5deg) translate3d(-50%,0,5em);
transform:rotatey(22.5deg) translate3d(-50%,0,5em);
}
.side:nth-child(2) {
background-position:-4em;
-webkit-transform:rotatey(45deg) translate3d(-50%,0,5em);
transform:rotatey(45deg) translate3d(-50%,0,5em);
}
.side:nth-child(3) {
background-position:-6em;
-webkit-transform:rotatey(67.5deg) translate3d(-50%,0,5em);
transform:rotatey(67.5deg) translate3d(-50%,0,5em);
}
.side:nth-child(4) {
background-position:-8em;
-webkit-transform:rotatey(90deg) translate3d(-50%,0,5em);
transform:rotatey(90deg) translate3d(-50%,0,5em);
}
.side:nth-child(5) {
background-position:-10em;
-webkit-transform:rotatey(112.5deg) translate3d(-50%,0,5em);
transform:rotatey(112.5deg) translate3d(-50%,0,5em);
}
.side:nth-child(6) {
background-position:-12em;
-webkit-transform:rotatey(135deg) translate3d(-50%,0,5em);
transform:rotatey(135deg) translate3d(-50%,0,5em);
}
.side:nth-child(7) {
background-position:-14em;
-webkit-transform:rotatey(157.5deg) translate3d(-50%,0,5em);
transform:rotatey(157.5deg) translate3d(-50%,0,5em);
}
.side:nth-child(8) {
background-position:-16em;
-webkit-transform:rotatey(180deg) translate3d(-50%,0,5em);
transform:rotatey(180deg) translate3d(-50%,0,5em);
}
.side:nth-child(9) {
background-position:-18em;
-webkit-transform:rotatey(202.5deg) translate3d(-50%,0,5em);
transform:rotatey(202.5deg) translate3d(-50%,0,5em);
}
.side:nth-child(10) {
background-position:-20em;
-webkit-transform:rotatey(225deg) translate3d(-50%,0,5em);
transform:rotatey(225deg) translate3d(-50%,0,5em);
}
.side:nth-child(11) {
background-position:-22em;
-webkit-transform:rotatey(247.5deg) translate3d(-50%,0,5em);
transform:rotatey(247.5deg) translate3d(-50%,0,5em);
}
.side:nth-child(12) {
background-position:-24em;
-webkit-transform:rotatey(270deg) translate3d(-50%,0,5em);
transform:rotatey(270deg) translate3d(-50%,0,5em);
}
.side:nth-child(13) {
background-position:-26em;
-webkit-transform:rotatey(292.5deg) translate3d(-50%,0,5em);
transform:rotatey(292.5deg) translate3d(-50%,0,5em);
}
.side:nth-child(14) {
background-position:-28em;
-webkit-transform:rotatey(315deg) translate3d(-50%,0,5em);
transform:rotatey(315deg) translate3d(-50%,0,5em);
}
.side:nth-child(15) {
background-position:-30em;
-webkit-transform:rotatey(337.5deg) translate3d(-50%,0,5em);
transform:rotatey(337.5deg) translate3d(-50%,0,5em);
}
.side:nth-child(16) {
background-position:-32em;
-webkit-transform:rotatey(360deg) translate3d(-50%,0,5em);
transform:rotatey(360deg) translate3d(-50%,0,5em);
}
.cylinder:nth-child(2) .side {
opacity:0.625;
}
@-webkit-keyframes tunnel {
100% {
-webkit-transform:rotatex(90deg) rotatey(360deg) translatey(-15em);
transform:rotatex(90deg) rotatey(360deg) translatey(-15em);
}
}@keyframes tunnel {
100% {
-webkit-transform:rotatex(90deg) rotatey(360deg) translatey(-15em);
transform:rotatex(90deg) rotatey(360deg) translatey(-15em);
}
}