.ball { display: inline-block; width: 100%; height: 100%; margin: 0; border-radius: 50%; position: relative; -webkit-transform-style: preserve-3d; background: url("www.nmmlaw.com/ib/wp-content/uploads/sites/26/2017/08/flat-globe.jpg") repeat-x; background-size: auto 100%; -webkit-animation: move-map 40s infinite linear; -moz-animation: move-map 40s infinite linear; -o-animation: move-map 40s infinite linear; -ms-animation: move-map 40s infinite linear; animation: move-map 40s infinite linear; } .ball:before { content: ""; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; border-radius: 50%; box-shadow: -40px 10px 70px 10px inset; z-index: 2; } .ball:after { content: ""; position: absolute; border-radius: 50%; width: 100%; height: 100%; top: 0; left: 0; -webkit-filter: blur(0); opacity: 0.3; background: -webkit-gradient(radial, 50% 80%, 0, 50% 80%, 100, color-stop(0%, #81e8f6), color-stop(10%, #76deef), color-stop(66%, #055194), color-stop(100%, #062745)); background: -webkit-radial-gradient(50% 80%, circle cover, #81e8f6, #76deef 10%, #055194 66%, #062745 100%); background: -moz-radial-gradient(50% 80%, circle cover, #81e8f6, #76deef 10%, #055194 66%, #062745 100%); background: -o-radial-gradient(50% 80%, circle cover, #81e8f6, #76deef 10%, #055194 66%, #062745 100%); background: radial-gradient(50% 80%, circle cover, #81e8f6, #76deef 10%, #055194 66%, #062745 100%); } .ball .shadow { position: absolute; width: 100%; height: 100%; background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, color-stop(0%, rgba(0, 0, 0, 0.4)), color-stop(40%, rgba(0, 0, 0, 0.1)), color-stop(50%, rgba(0, 0, 0, 0))); background: -webkit-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%); background: -moz-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%); background: -o-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%); background: radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%); -webkit-transform: rotateX(90deg) translateZ(-150px); -moz-transform: rotateX(90deg) translateZ(-150px); -ms-transform: rotateX(90deg) translateZ(-150px); -o-transform: rotateX(90deg) translateZ(-150px); transform: rotateX(90deg) translateZ(-150px); z-index: -1; } body { width: 300px; margin: 20px auto; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(100, 100, 100, 0.2)), color-stop(40%, rgba(255, 255, 255, 0.5)), color-stop(100%, #ffffff)); background: -webkit-linear-gradient(top, rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%); background: -moz-linear-gradient(top, rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%); background: -o-linear-gradient(top, rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%); background: linear-gradient(top, rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%); background-repeat: no-repeat; } .stage { width: 300px; height: 300px; display: inline-block; margin: 20px; -webkit-perspective: 1200px; -moz-perspective: 1200px; -ms-perspective: 1200px; -o-perspective: 1200px; perspective: 1200px; -webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; -o-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } @-moz-keyframes move-map { 0% { background-position: -849px 0; } 100% { background-position: 0 0; } } @-webkit-keyframes move-map { 0% { background-position: 0 0; } 100% { background-position: -849px 0; } } @-o-keyframes move-map { 0% { background-position: -849px 0; } 100% { background-position: 0 0; } } @-ms-keyframes move-map { 0% { background-position: -849px 0; } 100% { background-position: 0 0; } } @keyframes move-map { 0% { background-position: -849px 0; } 100% { background-position: 0 0; } } body, html { height: 100%; } .bg { background-image:url("pix/Nebula.jpg"); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; }