Display an image wrapped around a sphere using CSS / Javascript

Question

I know that this is possible with three.js, but it seems that three.js maximizes the mesh sphere and the image is slightly distorted. I would rather just use CSS if possible.

Is this something CSS CSS transforms can do? Ideally, I would like to animate it from a flat image to a sphere, so it would be great to be able to easily animate with CSS transitions.

Answer 1

I found a good example of how to do this with CSS on codepen: http://codepen.io/donovanh/pen/GBIiv . It doesn't actually wrap the image in 3d, but it looks good enough for my purposes.

Here is the corresponding html / css:

<section class="stage"> <figure class="ball"><span class="shadow"></span></figure> </section> .ball { display: inline-block; width: 100%; height: 100%; margin: 0; border-radius: 50%; position: relative; -webkit-transform-style: preserve-3d; background: url('https://alxgroup.net/gto-range-builder/images/treeSS.png') repeat-x; background-size: auto 100%; -webkit-animation: move-map 30s infinite linear; -moz-animation: move-map 30s infinite linear; -o-animation: move-map 30s infinite linear; -ms-animation: move-map 30s infinite linear; animation: move-map 30s infinite linear; } .ball:before { content: ""; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; border-radius: 50%; box-shadow: -40px 10px 70px 10px rgba(0,0,0,0.5) 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: radial-gradient(circle at 50% 80%, #81e8f6, #76deef 10%, #055194 66%, #062745 100%); } .ball .shadow { position: absolute; width: 100%; height: 100%; background: radial-gradient(circle at 50% 50%, 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: linear-gradient(to bottom, 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; } }