CSS之立体球体

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

<!DOCTYPE html>
<html>
<head>
<title>球体</title>
<meta charset="utf-8">
<style type="text/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)}
}
</style>
</head>
<body>
<fieldset></fieldset>
<div class="bk">
<div class="x"></div>
<div class="x"></div>
<div class="x"></div>
<div class="x"></div>
<div class="x"></div>
<div class="x"></div>
<div class="x"></div>
<div class="x"></div>
<div class="x"></div>
<div class="x"></div>