body { background:#000; color:rgb(236,132,57) } h1 { font:small-caps 167% Arial,Helvetica,sans-serif } #container { text-align:center; margin:0 auto; top:450px; width:550px; -moz-perspective:900px; -webkit-perspective:900 } #container:hover * { -moz-animation-play-state:paused; -webkit-animation-play-state:paused } #frame { width:33px; -moz-transform-style:preserve-3d; -webkit-transform-style:preserve-3d; /* translate must be last */ -moz-transform:rotateX(35deg) rotateY(45deg) rotateZ(15deg) translate3d(325px,-70px,50px); -webkit-transform:rotateX(35deg) rotateY(45deg) rotateZ(15deg) translate3d(325px,-70px,50px) } .strip { -moz-transform-style:preserve-3d; -webkit-transform-style:preserve-3d; -moz-animation:spin 25s infinite linear; -webkit-animation:spin 25s infinite linear } .strip div { position:absolute; background:#000 url(https://picsum.photos/792/320?image=320); /* background image is 792px 320px,try with green-hills or thailand-sunrise.jpg */ border:solid rgb(145,87,0); border-width:thin 0; height:320px; width:34px; opacity:1; } .strip .a { background-position:0 0; -moz-transform:rotateY(0deg) translateZ(124px); -webkit-transform:rotateY(0deg) translateZ(124px) } .strip .b { background-position:759px 0; -moz-transform:rotateY(15deg) translateZ(124px); -webkit-transform:rotateY(15deg) translateZ(124px) } .strip .c { background-position:726px 0; -moz-transform:rotateY(30deg) translateZ(124px); -webkit-transform:rotateY(30deg) translateZ(124px) } .strip .d { background-position:693px 0; -moz-transform:rotateY(45deg) translateZ(124px); -webkit-transform:rotateY(45deg) translateZ(124px) } .strip .e { background-position:660px 0; -moz-transform:rotateY(60deg) translateZ(124px); -webkit-transform:rotateY(60deg) translateZ(124px) } .strip .f { background-position:627px 0; -moz-transform:rotateY(75deg) translateZ(124px); -webkit-transform:rotateY(75deg) translateZ(124px) } .strip .g { background-position:594px 0; -moz-transform:rotateY(90deg) translateZ(124px); -webkit-transform:rotateY(90deg) translateZ(124px) } .strip .h { background-position:561px 0; -moz-transform:rotateY(105deg) translateZ(124px); -webkit-transform:rotateY(105deg) translateZ(124px) } .strip .i { background-position:528px 0; -moz-transform:rotateY(120deg) translateZ(124px); -webkit-transform:rotateY(120deg) translateZ(124px) } .strip .j { background-position:495px 0; -moz-transform:rotateY(135deg) translateZ(124px); -webkit-transform:rotateY(135deg) translateZ(124px) } .strip .k { background-position:462px 0; -moz-transform:rotateY(150deg) translateZ(124px); -webkit-transform:rotateY(150deg) translateZ(124px) } .strip .l { background-position:429px 0; -moz-transform:rotateY(165deg) translateZ(124px); -webkit-transform:rotateY(165deg) translateZ(124px) } .strip .m { background-position:396px 0; -moz-transform:rotateY(180deg) translateZ(124px); -webkit-transform:rotateY(180deg) translateZ(124px) } .strip .n { background-position:363px 0; -moz-transform:rotateY(195deg) translateZ(124px); -webkit-transform:rotateY(195deg) translateZ(124px) } .strip .o { background-position:330px 0; -moz-transform:rotateY(210deg) translateZ(124px); -webkit-transform:rotateY(210deg) translateZ(124px) } .strip .p { background-position:297px 0; -moz-transform:rotateY(225deg) translateZ(124px); -webkit-transform:rotateY(225deg) translateZ(124px) } .strip .q { background-position:264px 0; -moz-transform:rotateY(240deg) translateZ(124px); -webkit-transform:rotateY(240deg) translateZ(124px) } .strip .r { background-position:231px 0; -moz-transform:rotateY(255deg) translateZ(124px); -webkit-transform:rotateY(255deg) translateZ(124px) } .strip .s { background-position:198px 0; -moz-transform:rotateY(270deg) translateZ(124px); -webkit-transform:rotateY(270deg) translateZ(124px) } .strip .t { background-position:165px 0; -moz-transform:rotateY(285deg) translateZ(124px); -webkit-transform:rotateY(285deg) translateZ(124px) } .strip .u { background-position:132px 0; -moz-transform:rotateY(300deg) translateZ(124px); -webkit-transform:rotateY(300deg) translateZ(124px) } .strip .v { background-position:99px 0; -moz-transform:rotateY(315deg) translateZ(124px); -webkit-transform:rotateY(315deg) translateZ(124px) } .strip .w { background-position:66px 0; -moz-transform:rotateY(330deg) translateZ(124px); -webkit-transform:rotateY(330deg) translateZ(124px) } .strip .x { background-position:33px 0; -moz-transform:rotateY(345deg) translateZ(124px); -webkit-transform:rotateY(345deg) translateZ(124px) } @-moz-keyframes spin { from { -moz-transform:rotateY(0) } to { -moz-transform:rotateY(-360deg) } }@-webkit-keyframes spin { from { -webkit-transform:rotateY(0) } to { -webkit-transform:rotateY(-360deg) } }