How to Create Pure CSS 3-Dimensional Spheres

merge pure CSS 3-dimensional spheres in svg code

The SVG equivalent of your HTML is the following:

.shade
{
  animation: highlightanim 10s linear infinite;
}

@keyframes highlightanim {     
  0.00% {x: -150.00; y: -178.00 }
  12.50% {x: -117.67; y: -179.64 }
  25.00% {x: -97.69; y: -195.87 }
  28.75% {x: -95.00; y: -207.09 }
  32.50% {x: -97.69; y: -220.70 }
  40.00% {x: -117.67; y: -240.01 }
  47.50% {x: -150.00; y: -247.50 }
  55.00% {x: -182.33; y: -240.01 }
  62.50% {x: -202.31; y: -220.70 }
  68.75% {x: -205.00; y: -207.09 }
  75.00% {x: -202.31; y: -195.87 }
  87.50% {x: -182.33; y: -179.64 }
  100.00% {x: -150.00; y: -178.00 }
} 
  

<svg viewBox="0 0 100 100" width="500">
  <defs>
    <radialGradient id="shade-gradient"
      cx="50%" cy="50%" r="70.7%">
      <stop offset="0%" stop-color="white"/>
      <stop offset="25%" stop-color="black"/>
      <stop offset="50%" stop-color="grey"/>
      <stop offset="75%" stop-color="black"/>
      <stop offset="100%" stop-color="black"/>
    </radialGradient>
    
    <clipPath id="layer-clip">
      <circle cx="50" cy="50" r="50"/>
    </clipPath>
  </defs>
  
  <rect class="shade" x="0" y="0" width="400" height="400"
        fill="url(#shade-gradient)" clip-path="url(#layer-clip)"/>
</svg>

Implementing Pure CSS Sphere into website - how do I do it?

You're looking at preprocessed CSS and HTML - namely SCSS and HAML. In Codepen, if you click the eye icon for each of the code areas, you can toggle between viewing the preprocessor code, and the actual generated output.

The reason many devs/designers choose to use preprocessors is it greatly accelerates coding and makes many things much easier. For your Codepen example - there are 100 <div class="o"></div> being generated, and 100 animation transformation/colour base values. This is massively impractical, and shouldn't be used in production.

If you wanted a rotating sphere like this on your website - you might find better results using a spritesheet, an animated .gif, or writing it in WebGL.

How to create a sphere in css?

The below answer is not an actual 3D shape. It only gives a slight illusion of being 3D, however, depending on your use case, you may be able to 'fake' it:

html,body{margin:0;padding:0;background:#222;}

div{

    height:300px;

    width:300px;

    background:url(http://lorempixel.com/300/300);

    border-radius:50%;

    animation:spin 3s linear infinite;

    transform:rotate(-15deg);

    position:relative;

}

div:before{

    content:"";

    position:absolute;

    bottom:-50px;

    border-radius:50%;

    left:0;

    height:10%;

    width:100%;

    transform:rotate(15deg);

    background:rgba(0,0,0,0.6);

    box-shadow: 0 0 10px 2px rgba(0,0,0,0.6);

    

}

div:after{

    content:"";

    position:absolute;z-index:12;

    top:0;left:0;height:100%;width:100%;border-radius:50%;

box-shadow:inset -20px -20px 20px 2px #222, inset 20px 20px 20px 5px rgba(200,200,200,0.4);    

}

@keyframes spin{

    to{background-position:-300px 0;}

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div></div>

Three.js css3d - periodic table adding sphere object

Adding a sphere mesh into a sphere of CSS3DObjects is problematic because WebGL and HTML/CSS elements are rendered and sorted independently. Meaning the element labels will still be visible even when the sphere mesh is in front of them. This is demonstrated by the following example which is just an enhanced version of the official demo.

https://jsfiddle.net/dvop2wrb/

The basic idea is to create two renderers and place their domElement properties on top of each other like so:

// WebGL
    
rendererWebGL = new THREE.WebGLRenderer( { antialias: true } );
rendererWebGL.setPixelRatio( window.devicePixelRatio );
rendererWebGL.setSize( window.innerWidth, window.innerHeight );
container.appendChild( rendererWebGL.domElement );

// CSS

renderer = new CSS3DRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.domElement.style.position = 'absolute';
renderer.domElement.style.top = 0;
document.getElementById( 'container' ).appendChild( renderer.domElement );

However, even when doing so will not solve the mentioned visual glitch.

Consider to implement the periodic system with simple plane meshes instead of HTML/CSS elements (so you only use WebGLRenderer).

Display an image wrapped around a sphere with CSS/Javascript

I found a nice 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 nice enough for my purposes.

Here is the relevant 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; } }

---

Related Topics