*{margin:0;padding:0}body{background:#fff}@-webkit-keyframes xuanz{0%{transform:rotateY(0deg)}20%{transform:rotateY(90deg)}40%{transform:rotateY(180deg)}80%{transform:rotateY(270deg)}to{transform:rotateY(1turn)}}@keyframes xuanz{0%{transform:rotateY(0deg)}20%{transform:rotateY(90deg)}40%{transform:rotateY(180deg)}80%{transform:rotateY(270deg)}to{transform:rotateY(1turn)}}.ball{position:relative;width:300px;height:300px;margin:100px auto;transform-style:preserve-3d;-webkit-animation:gundong 5s linear 1s infinite;animation:gundong 5s linear 1s infinite}.xcircle,.ycircle,.zcircle{position:absolute;left:0;right:0;top:0;bottom:0;border-radius:50%;transition:all 1s ease}.x1,.x3,.y1,.y3,.z1,.z3{width:87.5%;height:87.5%;margin:6.25% auto}.x2,.y2,.z2{width:100%;height:100%}.x2,.xLine{border:2px solid #00f;transform:rotateX(90deg)}.z2,.zLine{border:2px solid orange;transform:rotateY(90deg)}.ycircle,.yLine{border:2px solid red}.yLine{transform:rotate(90deg)}.x1{transform:rotateX(90deg) translateZ(75px)}.x1,.x3{border:2px solid #00f}.x3{transform:rotateX(90deg) translateZ(-75px)}.z1{transform:rotateY(90deg) translateZ(75px)}.z1,.z3{border:2px solid orange}.z3{transform:rotateY(90deg) translateZ(-75px)}.y1{transform:translateZ(75px)}.y1,.y3{border:2px solid red}.y3{transform:translateZ(-75px)}.xLine,.yLine,.zLine{position:absolute;width:100%;top:50%}@-webkit-keyframes gundong{0%{transform:rotateY(0deg) rotateX(0deg)}20%{transform:rotateY(90deg) rotateX(90deg)}40%{transform:rotateY(180deg) rotateX(180deg)}80%{transform:rotateY(270deg) rotateX(270deg)}to{transform:rotateY(1turn) rotateX(1turn)}}@keyframes gundong{0%{transform:rotateY(0deg) rotateX(0deg)}20%{transform:rotateY(90deg) rotateX(90deg)}40%{transform:rotateY(180deg) rotateX(180deg)}80%{transform:rotateY(270deg) rotateX(270deg)}to{transform:rotateY(1turn) rotateX(1turn)}}