html 如何用div做无限旋转的立方体,CSS3制作转动立方体（小菜鸟）

body{background: black;}

.wrap{

height:350px;

position:relative;

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

-webkit-perspective: 0px;

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

-o-perspective: 0px;

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

-moz-perspective: 0px;

transform-style: preserve-3d;

perspective: 0px;

-webkit-animation: myanimation 5s ease-in-out 3s infinite;

-o-animation: myanimation 5s ease-in-out 3s infinite;

-moz-animation: myanimation 5s ease-in-out 3s infinite;

-ms-animation: myanimation 5s ease-in-out 3s infinite;

animation: myanimation 5s ease-in-out 3s infinite;

}

.box{

width:200px;

height:200px;

position:absolute;

top:50%;

left:50%;

margin-top:-100px;

margin-left:-100px;

line-height:200px;

font-size:48px;

text-align: center;

color:white;

}

.box1{

-webkit-transform: rotateY(90deg) translateZ(-100px);

-o-transform: rotateY(90deg) translateZ(-100px);

-moz-transform: rotateY(90deg) translateZ(-100px);

transform: rotateY(90deg) translateZ(-100px);

background-color: rgba(56, 89, 157, 0.5);

}

.box2{

-webkit-transform: rotateX(90deg) translateZ(100px) ;

-o-transform: rotateX(90deg) translateZ(100px);

-moz-transform: rotateX(90deg) translateZ(100px);

transform: rotateX(90deg) translateZ(100px);

background-color: rgba(156, 189, 157, 0.5);

}

.box3{

-webkit-transform: rotateY(90deg) translateZ(100px);

-o-transform: rotateY(90deg) translateZ(100px);

-moz-transform: rotateY(90deg) translateZ(100px);

transform: rotateY(90deg) translateZ(100px);

background-color: rgba(156, 69, 195, 0.5);

}

.box4{

-webkit-transform: rotateX(90deg) translateZ(-100px);

-o-transform: rotateX(90deg) translateZ(-100px);

-moz-transform: rotateX(90deg) translateZ(-100px);

transform: rotateX(90deg) translateZ(-100px);

background-color: rgba(156, 249, 195, 0.5);

}

.box5{

-webkit-transform: translateZ(-100px);

-o-transform: translateZ(-100px);

-moz-transform: translateZ(-100px);

transform: translateZ(-100px);

background: #f60;

}

.box6{

-webkit-transform: translateZ(100px);

-o-transform: translateZ(100px);

-moz-transform: translateZ(100px);

transform: translateZ(100px);

background-color: rgba(256, 149, 0, 0.5);

}

@-webkit-keyframes myanimation{

0%{

-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);

-webkit-transform-origin: center center;

}

100%{

-webkit-transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);

-webkit-transform-origin: center center;

}

}

@-moz-keyframes myanimation{

0%{

-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);

-moz-transform-origin: center center;

}

100%{

-moz-transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);

-moz-transform-origin: center center;

}

}

@-o-keyframes myanimation{

0%{

-o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);

-o-transform-origin: center center;

}

100%{

-o-transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);

-o-transform-origin: center center;

}

}

@-ms-keyframes myanimation{

0%{

-ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);

-ms-transform-origin: center center;

}

100%{

-ms-transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);

-ms-transform-origin: center center;

}

}

@keyframes myanimation{

0%{

transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);

transform-origin: center center;

}

100%{

transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);

transform-origin: center center;

}

}

1

2

3

4

5

6