Html
<div class= "Ball-box" > <div class= "Ball" > <div class= "line1" ></div> <div class= "Line2" ></div> <div class= "Line3" ></div> <div class= "Line4" ></div > <div class= "Line5" ></div> </div></div>
Css
<style type= "Text/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); Transform:rotatez ( -30deg) Rotatey (0deg); } 100%{-webkit-transform:rotatez ( -30deg) Rotatey(360DEG); -moz-transform:rotatez ( -30deg) Rotatey (360deg); -ms-transform:rotatez ( -30deg) Rotatey (360deg); -o-transform:rotatez ( -30deg) Rotatey (360deg); Transform:rotatez ( -30deg) Rotatey (360deg); }} @-moz-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); Transform:rotatez ( -30deg) Rotatey (0deg); } 100%{-webkit-transform:rotatez ( -30deg) Rotatey (360deg); -moz-transform:rotatez ( -30deg) Rotatey (360deg); -ms-transform:rotatez ( -30deg) Rotatey (360deg); -o-transform:rotatez ( -30deg) Rotatey (360deg); Transform:rotatez ( -30deg) Rotatey (360deg); }} @-ms-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); Transform:rotatez ( -30deg) Rotatey (0deg); } 100%{-webkit-transform:rotatez ( -30deg) Rotatey (360deg); -moz-transform:rotatez ( -30deg) Rotatey (360deg); -ms-transform:rotatez ( -30deg) Rotatey (360deg); -o-transform:rotatez ( -30deg) Rotatey (360deg); Transform:rotatez ( -30deg) Rotatey (360deg); }} @-o-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); Transform:rotatez ( -30deg) Rotatey (0deg); } 100%{-webkit-transform:rotatez ( -30deg) Rotatey (360deg); -moz-transfOrm:rotatez ( -30deg) Rotatey (360deg); -ms-transform:rotatez ( -30deg) Rotatey (360deg); -o-transform:rotatez ( -30deg) Rotatey (360deg); Transform:rotatez ( -30deg) Rotatey (360deg); }} @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); Transform:rotatez ( -30deg) Rotatey (0deg); } 100%{-webkit-transform:rotatez ( -30deg) Rotatey (360deg); -moz-transform:rotatez ( -30deg) Rotatey (360deg); -ms-transform:rotatez ( -30deg) Rotatey (360deg); -o-transform:rotatez ( -30deg) Rotatey (360deg); Transform:rotatez ( -30deg) Rotatey (360deg); }}. ball{height:100%; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; -ms-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-animation:rotate3d 30s linear infinite; -moz-animation:rotate3d 30s linear infinite; -ms-animation:rotate3d 30s linear infinite; -o-animation:rotate3d 30s linear infinite; Animation:rotate3d 30s linear infinite; }. ball:after{Display:block; Content: "; width:1px; height:500px; Background-color: #ff0; Position:absolute; Top: -100px; left:150px; }. Ball > div{border:1px #ffffff solid; Position:absolute; width:100%; height:100%; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; }. Ball. line1{-webkit-transform:rotatey (0DEG); -moz-transform:rotatey (0DEG); -ms-transform:rotatey (0DEG); -o-transform:rotatey (0DEG); Transform:rotatey (0DEG); }. Ball. line2{-webkit-tRansform:rotatey (36DEG); -moz-transform:rotatey (36DEG); -ms-transform:rotatey (36DEG); -o-transform:rotatey (36DEG); Transform:rotatey (36DEG); }. Ball. line3{-webkit-transform:rotatey (72DEG); -moz-transform:rotatey (72DEG); -ms-transform:rotatey (72DEG); -o-transform:rotatey (72DEG); Transform:rotatey (72DEG); }. Ball. line4{-webkit-transform:rotatey (108DEG); -moz-transform:rotatey (108DEG); -ms-transform:rotatey (108DEG); -o-transform:rotatey (108DEG); Transform:rotatey (108DEG); }. Ball. line1{-webkit-transform:rotatey (144DEG); -moz-transform:rotatey (144DEG); -ms-transform:rotatey (144DEG); -o-transform:rotatey (144DEG); Transform:rotatey (144DEG); }</style>
CSS3 achieve 3D Sphere rotation animation