java 立体球_CSS之立体球体

球体

body{

background-image: linear-gradient(90deg,red ,#ccc 30%,#fff 100%)

}

.bk{

margin: 200px auto;

height: 500px;width: 500px;

/*border:1px solid black;*/

position: relative;

transform-style:preserve-3d;

transform:rotate(-20deg) rotateX(-20deg) rotateY(0);

animation: ball 100s infinite linear;

}

.bk div{

position: absolute;

height: 100%;width: 100%;

border-radius: 100%;

}

.x{

border:1px solid black;

}

.y{

border:1px solid blue;

}

.x:nth-child(1){

transform: rotateY(18deg);

}

.x:nth-child(2){

transform: rotateY(36deg);

}

.x:nth-child(3){

transform: rotateY(54deg);

}

.x:nth-child(4){

transform: rotateY(72deg);

}

.x:nth-child(5){

transform: rotateY(90deg);

}

.x:nth-child(6){

transform: rotateY(108deg);

}

.x:nth-child(7){

transform: rotateY(126deg);

}

.x:nth-child(8){

transform: rotateY(144deg);

}

.x:nth-child(9){

transform: rotateY(162deg);

}

.x:nth-child(10){

transform: rotateY(180deg);

}

.y:nth-child(11){

transform: rotateX(90deg) translateZ(0px) scale(1);

}

.y:nth-child(12){

transform: rotateX(90deg) translateZ(50px) scale(0.98);

}

.y:nth-child(13){

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

}

.y:nth-child(14){

transform: rotateX(90deg) translateZ(150px) scale(0.80);

}

.y:nth-child(15){

transform: rotateX(90deg) translateZ(-150px) scale(0.80);

}

.y:nth-child(16){

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

}

.y:nth-child(17){

transform: rotateX(90deg) translateZ(-50px) scale(0.98);

}

@keyframes ball {

0% {transform:rotate(-20deg) rotateX(-20deg) rotateY(0)}

100% {transform:rotate(-20deg) rotateX(-20deg) rotateY(360deg)}

}