Html
    Css
    Js

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

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css图片卷轴

0