css3橙色球形_CSS3实现3D球体旋转动画

html

css

body{

background-color: #000000;

}

.ball-box{

width: 300px;

height: 300px;

position: absolute;

left: 50%;

top: 50%;

margin: -150px 0 0 -150px;

-webkit-perspective-origin: 50% 50%;

-moz-perspective-origin: 50% 50%;

-ms-perspective-origin: 50% 50%;

-o-perspective-origin: 50% 50%;

perspective-origin: 50% 50%;

-webkit-perspective: 3000px;

-moz-perspective: 3000px;

-ms-perspective: 3000px;

-o-perspective: 3000px;

perspective: 3000px;

}

@-webkit-keyframes rotate3d {

0%{

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

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

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

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

tr