<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 半月形3D图片（卷轴）</title>
<style>
body {
background: #000;
color: #ec8439;
}
h1 {
font: small-caps 167% Arial, Helvetica, sans-serif;
}
#container {
text-align: center;
margin: 0 auto;
top: 250px;
width: 550px;
-moz-perspective: 900px;
-webkit-perspective: 900;
}
#frame {
width: 33px;
-moz-transform-style: preserve-3d;
/* translate must be last */
-webkit-transform-style: preserve-3d;
-moz-transform: rotateX(35deg) rotateY(45deg) rotateZ(15deg) translate3d(325px, -70px, 50px);
-webkit-transform: rotateX(10deg) rotateY(90deg) rotateZ(0deg) 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 image is 792px 320px, try with green-hills or thailand-sunrise.jpg */
background: #000 url(img/landscape.jpg);
border: solid #915700;
border-width: thin 0;
height: 320px;
width: 34px;
opacity: 1;
}
.strip .a {
background-position: 0 0;
-moz-transform: rotateY(0deg) translateZ(248px);
-webkit-transform: rotateY(0deg) translateZ(248px);
}
.strip .b {
background-position: 759px 0;
-moz-transform: rotateY(7.5deg) translateZ(248px);
-webkit-transform: rotateY(7.5deg) translateZ(248px);
}
.strip .c {
background-position: 726px 0;
-moz-transform: rotateY(15deg) translateZ(248px);
-webkit-transform: rotateY(15deg) translateZ(248px);
}
.strip .d {
background-position: 693px 0;
-moz-transform: rotateY(22.5deg) translateZ(248px);
-webkit-transform: rotateY(22.5deg) translateZ(248px);
}
.strip .e {
background-position: 660px 0;
-moz-transform: rotateY(30deg) translateZ(248px);
-webkit-transform: rotateY(30deg) translateZ(248px);
}
.strip .f {
background-position: 627px 0;
-moz-transform: rotateY(37.5deg) translateZ(248px);
-webkit-transform: rotateY(37.5deg) translateZ(248px);
}
.strip .g {
background-position: 594px 0;
-moz-transform: rotateY(45deg) translateZ(248px);
-webkit-transform: rotateY(45deg) translateZ(248px);
}
.strip .h {
background-position: 561px 0;
-moz-transform: rotateY(52.5deg) translateZ(248px);
-webkit-transform: rotateY(52.5deg) translateZ(248px);
}
.strip .i {
background-position: 528px 0;
-moz-transform: rotateY(60deg) translateZ(248px);
-webkit-transform: rotateY(60deg) translateZ(248px);
}
.strip .j {
background-position: 495px 0;
-moz-transform: rotateY(67.5deg) translateZ(248px);
-webkit-transform: rotateY(67.5deg) translateZ(248px);
}
.strip .k {
background-position: 462px 0;
-moz-transform: rotateY(75deg) translateZ(248px);
-webkit-transform: rotateY(75deg) translateZ(248px);
}
.strip .l {
background-position: 429px 0;
-moz-transform: rotateY(82.5deg) translateZ(248px);
-webkit-transform: rotateY(82.2deg) translateZ(248px);
}
.strip .m {
background-position: 396px 0;
-moz-transform: rotateY(90deg) translateZ(248px);
-webkit-transform: rotateY(90deg) translateZ(248px);
}
.strip .n {
background-position: 363px 0;
-moz-transform: rotateY(97.5deg) translateZ(248px);
-webkit-transform: rotateY(97.5deg) translateZ(248px);
}
.strip .o {
background-position: 330px 0;
-moz-transform: rotateY(105deg) translateZ(248px);
-webkit-transform: rotateY(105deg) translateZ(248px);
}
.strip .p {
background-position: 297px 0;
-moz-transform: rotateY(112.5deg) translateZ(248px);
-webkit-transform: rotateY(112.5deg) translateZ(248px);
}
.strip .q {
background-position: 264px 0;
-moz-transform: rotateY(120deg) translateZ(248px);
-webkit-transform: rotateY(120deg) translateZ(248px);
}
.strip .r {
background-position: 231px 0;
-moz-transform: rotateY(127.5deg) translateZ(248px);
-webkit-transform: rotateY(127.5deg) translateZ(248px);
}
.strip .s {
background-position: 198px 0;
-moz-transform: rotateY(135deg) translateZ(248px);
-webkit-transform: rotateY(135deg) translateZ(248px);
}
.strip .t {
background-position: 165px 0;
-moz-transform: rotateY(142.5deg) translateZ(248px);
-webkit-transform: rotateY(142.5deg) translateZ(248px);
}
.strip .u {
background-position: 132px 0;
-moz-transform: rotateY(150deg) translateZ(248px);
-webkit-transform: rotateY(150deg) translateZ(248px);
}
.strip .v {
background-position: 99px 0;
-moz-transform: rotateY(157.5deg) translateZ(248px);
-webkit-transform: rotateY(157.5deg) translateZ(248px);
}
.strip .w {
background-position: 66px 0;
-moz-transform: rotateY(165deg) translateZ(248px);
-webkit-transform: rotateY(165deg) translateZ(248px);
}
.strip .x {
background-position: 33px 0;
-moz-transform: rotateY(172.5deg) translateZ(248px);
-webkit-transform: rotateY(172.5deg) translateZ(248px);
}
@-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);
}
}
</style>
</head>
<body>
<div id="container">
<h1>Half Moon Image</h1>
<div id="frame">
<div class="strip">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>
<div class="g"></div>
<div class="h"></div>
<div class="i"></div>
<div class="j"></div>
<div class="k"></div>
<div class="l"></div>
<div class="m"></div>
<div class="n"></div>
<div class="o"></div>
<div class="p"></div>
<div class="q"></div>
<div class="r"></div>
<div class="s"></div>
<div class="t"></div>
<div class="u"></div>
<div class="v"></div>
<div class="w"></div>
<div class="x"></div>
</div>
</div>
</div>
</body>
</html>
