卷轴css html,css图片卷轴

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)

}

}