html实现圆桶效果,纯CSS3实现的圆桶状旋转的文章

CSS

语言：

CSSSCSS

确定

body {

background: #000;

color: #fff;

}

h1 {

font: small-caps 167% Arial, Helvetica, sans-serif;

}

#container {

text-align: center;

margin: 0 auto;

/*top:450px;*/

width: 30%;

-moz-perspective: 2000px;

-webkit-perspective: 2000px;

}

#container:hover * {

-moz-animation-play-state: paused;

-webkit-animation-play-state: paused;

}

#frame {

width: 33px;

-moz-transform-style: preserve-3d;

/* translate must be last */

-webkit-transform-style: preserve-3d;

-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(125px, 70px, 50px);

-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(125px, 70px, 50px);

}

.strip {

-moz-transform-style: preserve-3d;

-webkit-transform-style: preserve-3d;

-moz-animation: spin 15s infinite linear;

-webkit-animation: spin 15s infinite linear;

}

.strip div {

position: absolute;

background: url(http://paintcanlabels.com/labels0115/wp-content/uploads/2013/04/paint-can-label-11.jpg);

background-color: #5fb9b0;

background-repeat: repeat;

border-width: thin 10px;

height: 240px;

width: 34px;

opacity: 100;

border-top: 1px solid #000;

border-bottom: 1px solid #000;

}

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

}

.strip .y {

background-position: 0px 0;

-moz-transform: rotateY(0deg) translateZ(124px);

-webkit-transform: rotateY(0deg) 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);

}

}