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); } }