Sphere Spin

Developer
James Steinbach
Size
4,204 Kb
Views
8,096
  1. Sphere Spin Previews
  2. Sphere Spin HTML Codes
  3. Sphere Spin CSS Codes
  4. Sphere Spin JS Codes

How do I make an sphere spin?

What is a sphere spin? How do you make a sphere spin? This script and codes were developed by James Steinbach on 05 November 2022, Saturday.

Sphere Spin Previews
IQ Test

Sphere Spin - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sphere Spin</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html { height: 100%; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzIyMjIyMiIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -moz-radial-gradient(center center, #333333 0%, #222222 100%); background-image: -webkit-radial-gradient(center center, #333333 0%, #222222 100%); background-image: radial-gradient(center center, #333333 0%, #222222 100%); overflow: hidden; font-family: Gotham, Proxima Nova, Helvetica, sans-serif;
}
.main { position: relative; margin: 10em auto 0; width: 20em; perspective-origin: 50% 50%; transform-style: preserve-3d; transform-origin: bottom center -10em; animation: spin 3s infinite linear;
}
.circle { position: absolute; top: -1px; left: -1px; bottom: -1px; right: -1px; width: 20em; height: 20em; border-radius: 10em; padding: 0; border: 1px solid #fff; background: transparent; box-sizing: border-box; transition: transform .2s linear; transform: rotateY(6deg) rotateX(6deg) rotateZ(6deg); transform-style: preserve-3d; /*animation: grow .3s infinite linear;*/
}
.one { border-color: white;
}
.two { border-color: orange;
}
@keyframes spin { 0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 100% { transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg); }
}
@keyframes grow { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="main"> <div class="top"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Sphere Spin - Script Codes CSS Codes

html { height: 100%; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzIyMjIyMiIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -moz-radial-gradient(center center, #333333 0%, #222222 100%); background-image: -webkit-radial-gradient(center center, #333333 0%, #222222 100%); background-image: radial-gradient(center center, #333333 0%, #222222 100%); overflow: hidden; font-family: Gotham, Proxima Nova, Helvetica, sans-serif;
}
.main { position: relative; margin: 10em auto 0; width: 20em; perspective-origin: 50% 50%; transform-style: preserve-3d; transform-origin: bottom center -10em; animation: spin 3s infinite linear;
}
.circle { position: absolute; top: -1px; left: -1px; bottom: -1px; right: -1px; width: 20em; height: 20em; border-radius: 10em; padding: 0; border: 1px solid #fff; background: transparent; box-sizing: border-box; transition: transform .2s linear; transform: rotateY(6deg) rotateX(6deg) rotateZ(6deg); transform-style: preserve-3d; /*animation: grow .3s infinite linear;*/
}
.one { border-color: white;
}
.two { border-color: orange;
}
@keyframes spin { 0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 100% { transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg); }
}
@keyframes grow { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); }
}

Sphere Spin - Script Codes JS Codes

function fillMe() { i = 0; while (i < 30) { count = i%2; if (count == 1) { numCount = 'one'; } else if (count == 0) { numCount = 'two'; } else { numCount = 'three'; } $('.top').removeClass('top').append('<div class="circle '+numCount+' top"></div>'); i++; }
};
$(document).ready(function() { fillMe();
});
Sphere Spin - Script Codes
Sphere Spin - Script Codes
Home Page Home
Developer James Steinbach
Username jdsteinbach
Uploaded November 05, 2022
Rating 3
Size 4,204 Kb
Views 8,096
Do you need developer help for Sphere Spin?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

James Steinbach (jdsteinbach) Script Codes
Name
Parallax-ish Sliding Content
Content Blur under Fixed Header
Adding Shadow to SVG elements
Using a gradient for a border
Gradient Hover Effect
CSS Variables
Sass Geometric Pattern Generator
Testing Newer Width Values
Swinging Door Menu
Moving Polygons
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!