CSS Spinning Wireframe Sphere

Developer
Aaron Levine
Size
4,612 Kb
Views
6,072
  1. CSS Spinning Wireframe Sphere Previews
  2. CSS Spinning Wireframe Sphere HTML Codes
  3. CSS Spinning Wireframe Sphere CSS Codes

How do I make an css spinning wireframe sphere?

As the name says, a pure css spinning wireframe sphere. The hardest part was figuring out how to scale the latitude lines.. What is a css spinning wireframe sphere? How do you make a css spinning wireframe sphere? This script and codes were developed by Aaron Levine on 30 January 2023, Monday.

CSS Spinning Wireframe Sphere Previews
IQ Test

CSS Spinning Wireframe Sphere - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Spinning Wireframe Sphere</title> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"/> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Pure CSS Wireframe Sphere</h1>
<div class="container"> <div class="ball spin"> <div class="lat"></div> <div class="lng"></div> <div class="lat"></div> <div class="lng"></div> <div class="lat"></div> <div class="lng"></div> <div class="lat"></div> <div class="lng"></div> <div class="lat"></div> <div class="lng"></div> </div>
</div>
<div class="shade"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

CSS Spinning Wireframe Sphere - Script Codes CSS Codes

@-moz-keyframes spin { 0% { -moz-transform: translate(-50%, -50%) rotate3d(0.125, 0.75, 1, 0); transform: translate(-50%, -50%) rotate3d(0.125, 0.75, 1, 0); } 50% { -moz-transform: translate(-50%, -50%) rotate3d(0.125, 1, 1, 180deg); transform: translate(-50%, -50%) rotate3d(0.125, 1, 1, 180deg); } 100% { -moz-transform: translate(-50%, -50%) rotate3d(0.125, 0.75, 1, 359deg); transform: translate(-50%, -50%) rotate3d(0.125, 0.75, 1, 359deg); }
}
@-webkit-keyframes spin { 0% { -webkit-transform: translate(-50%, -50%) rotate3d(0.125, 0.75, 1, 0); transform: translate(-50%, -50%) rotate3d(0.125, 0.75, 1, 0); } 50% { -webkit-transform: translate(-50%, -50%) rotate3d(0.125, 1, 1, 180deg); transform: translate(-50%, -50%) rotate3d(0.125, 1, 1, 180deg); } 100% { -webkit-transform: translate(-50%, -50%) rotate3d(0.125, 0.75, 1, 359deg); transform: translate(-50%, -50%) rotate3d(0.125, 0.75, 1, 359deg); }
}
@keyframes spin { 0% { -moz-transform: translate(-50%, -50%) rotate3d(0.125, 0.75, 1, 0); -ms-transform: translate(-50%, -50%) rotate3d(0.125, 0.75, 1, 0); -webkit-transform: translate(-50%, -50%) rotate3d(0.125, 0.75, 1, 0); transform: translate(-50%, -50%) rotate3d(0.125, 0.75, 1, 0); } 50% { -moz-transform: translate(-50%, -50%) rotate3d(0.125, 1, 1, 180deg); -ms-transform: translate(-50%, -50%) rotate3d(0.125, 1, 1, 180deg); -webkit-transform: translate(-50%, -50%) rotate3d(0.125, 1, 1, 180deg); transform: translate(-50%, -50%) rotate3d(0.125, 1, 1, 180deg); } 100% { -moz-transform: translate(-50%, -50%) rotate3d(0.125, 0.75, 1, 359deg); -ms-transform: translate(-50%, -50%) rotate3d(0.125, 0.75, 1, 359deg); -webkit-transform: translate(-50%, -50%) rotate3d(0.125, 0.75, 1, 359deg); transform: translate(-50%, -50%) rotate3d(0.125, 0.75, 1, 359deg); }
}
.shade { position: relative; box-sizing: border-box; display: inline-block; padding: 0; margin: 0; width: 100%; height: 50%; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzk5OTk5OSIgc3RvcC1vcGFjaXR5PSIwLjEiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzk5OTk5OSIgc3RvcC1vcGFjaXR5PSIwLjgiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(153, 153, 153, 0.1)), color-stop(50%, rgba(153, 153, 153, 0.8))); background-image: -moz-linear-gradient(top, rgba(153, 153, 153, 0.1) 0%, rgba(153, 153, 153, 0.8) 50%); background-image: -webkit-linear-gradient(top, rgba(153, 153, 153, 0.1) 0%, rgba(153, 153, 153, 0.8) 50%); background-image: linear-gradient(to bottom, rgba(153, 153, 153, 0.1) 0%, rgba(153, 153, 153, 0.8) 50%); background-size: 100% 100%;
}
.container { position: relative; box-sizing: border-box; display: inline-block; padding: 0; margin: 0; width: 100%; height: 50%; -webkit-box-reflect: below;
}
.container > .ball { box-sizing: border-box; position: absolute; left: 50%; top: 75%; display: inline-block; width: 25vh; height: 25vh; -moz-perspective: 1000px; -webkit-perspective: 1000px; perspective: 1000px; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; /* This is what's doing pretty much everything. The hardest part was figuring out how to scale the latitude lines */
}
.container > .ball.spin { -moz-animation: spin 5s linear infinite; -webkit-animation: spin 5s linear infinite; animation: spin 5s linear infinite;
}
.container > .ball > .lat, .container > .ball .lng { box-sizing: border-box; position: absolute; left: -50%; top: -50%; display: inline-block; width: 50vh; height: 50vh; background: rgba(204, 204, 204, 0.25); border: solid 8px rgba(0, 0, 0, 0.125); -moz-perspective: 1000px; -webkit-perspective: 1000px; perspective: 1000px; -moz-transform-origin: 50% 50% 50%; -ms-transform-origin: 50% 50% 50%; -webkit-transform-origin: 50% 50% 50%; transform-origin: 50% 50% 50%; -moz-box-shadow: 0 0 0 10px 8px rgba(0, 0, 0, 0.125), 0 0 10px 8px transparent; -webkit-box-shadow: 0 0 0 10px 8px rgba(0, 0, 0, 0.125), 0 0 10px 8px transparent; box-shadow: 0 0 0 10px 8px rgba(0, 0, 0, 0.125), 0 0 10px 8px transparent; border-radius: 50%;
}
.container > .ball > .lat:after, .container > .ball .lng:after { content: ''; box-sizing: border-box; position: absolute; left: 0; top: 0; width: 50vh; height: 50vh; border: solid 32px rgba(0, 0, 0, 0.125); -moz-box-shadow: 0 0 0 10px 8px rgba(0, 0, 0, 0.125), 0 0 10px 8px transparent; -webkit-box-shadow: 0 0 0 10px 8px rgba(0, 0, 0, 0.125), 0 0 10px 8px transparent; box-shadow: 0 0 0 10px 8px rgba(0, 0, 0, 0.125), 0 0 10px 8px transparent; border-radius: 50%;
}
.container > .ball > .lat:before, .container > .ball .lng:before { content: ''; box-sizing: border-box; position: absolute; left: 0; top: 0; width: 50vh; height: 50vh; background: rgba(0, 0, 0, 0.25); border: solid 32px rgba(0, 0, 0, 0.125); border-radius: 50%; -moz-box-shadow: 0 0 0 10px 8px rgba(0, 0, 0, 0.125), 0 0 10px 8px transparent; -webkit-box-shadow: 0 0 0 10px 8px rgba(0, 0, 0, 0.125), 0 0 10px 8px transparent; box-shadow: 0 0 0 10px 8px rgba(0, 0, 0, 0.125), 0 0 10px 8px transparent;
}
.container > .ball > .lat:nth-child(1) { -moz-transform: translateY(-12.5vh) scale3d(0, 0, 0) scale3d(0.5, 0.5, 0.5) rotate3d(1, 0, 0, 90deg); -ms-transform: translateY(-12.5vh) scale3d(0, 0, 0) scale3d(0.5, 0.5, 0.5) rotate3d(1, 0, 0, 90deg); -webkit-transform: translateY(-12.5vh) scale3d(0, 0, 0) scale3d(0.5, 0.5, 0.5) rotate3d(1, 0, 0, 90deg); transform: translateY(-12.5vh) scale3d(0, 0, 0) scale3d(0.5, 0.5, 0.5) rotate3d(1, 0, 0, 90deg);
}
.container > .ball > .lng:nth-child(2) { -moz-transform: scale3d(0.5, 0.5, 0.5) rotate3d(0, 1, 0, 36deg); -ms-transform: scale3d(0.5, 0.5, 0.5) rotate3d(0, 1, 0, 36deg); -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate3d(0, 1, 0, 36deg); transform: scale3d(0.5, 0.5, 0.5) rotate3d(0, 1, 0, 36deg);
}
.container > .ball > .lat:nth-child(3) { -moz-transform: translateY(-7.5vh) scale3d(0.8, 0.8, 0.8) scale3d(0.5, 0.5, 0.5) rotate3d(1, 0, 0, 90deg); -ms-transform: translateY(-7.5vh) scale3d(0.8, 0.8, 0.8) scale3d(0.5, 0.5, 0.5) rotate3d(1, 0, 0, 90deg); -webkit-transform: translateY(-7.5vh) scale3d(0.8, 0.8, 0.8) scale3d(0.5, 0.5, 0.5) rotate3d(1, 0, 0, 90deg); transform: translateY(-7.5vh) scale3d(0.8, 0.8, 0.8) scale3d(0.5, 0.5, 0.5) rotate3d(1, 0, 0, 90deg);
}
.container > .ball > .lng:nth-child(4) { -moz-transform: scale3d(0.5, 0.5, 0.5) rotate3d(0, 1, 0, 72deg); -ms-transform: scale3d(0.5, 0.5, 0.5) rotate3d(0, 1, 0, 72deg); -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate3d(0, 1, 0, 72deg); transform: scale3d(0.5, 0.5, 0.5) rotate3d(0, 1, 0, 72deg);
}
.container > .ball > .lat:nth-child(5) { -moz-transform: translateY(-2.5vh) scale3d(0.9798, 0.9798, 0.9798) scale3d(0.5, 0.5, 0.5) rotate3d(1, 0, 0, 90deg); -ms-transform: translateY(-2.5vh) scale3d(0.9798, 0.9798, 0.9798) scale3d(0.5, 0.5, 0.5) rotate3d(1, 0, 0, 90deg); -webkit-transform: translateY(-2.5vh) scale3d(0.9798, 0.9798, 0.9798) scale3d(0.5, 0.5, 0.5) rotate3d(1, 0, 0, 90deg); transform: translateY(-2.5vh) scale3d(0.9798, 0.9798, 0.9798) scale3d(0.5, 0.5, 0.5) rotate3d(1, 0, 0, 90deg);
}
.container > .ball > .lng:nth-child(6) { -moz-transform: scale3d(0.5, 0.5, 0.5) rotate3d(0, 1, 0, 108deg); -ms-transform: scale3d(0.5, 0.5, 0.5) rotate3d(0, 1, 0, 108deg); -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate3d(0, 1, 0, 108deg); transform: scale3d(0.5, 0.5, 0.5) rotate3d(0, 1, 0, 108deg);
}
.container > .ball > .lat:nth-child(7) { -moz-transform: translateY(2.5vh) scale3d(0.9798, 0.9798, 0.9798) scale3d(0.5, 0.5, 0.5) rotate3d(1, 0, 0, 90deg); -ms-transform: translateY(2.5vh) scale3d(0.9798, 0.9798, 0.9798) scale3d(0.5, 0.5, 0.5) rotate3d(1, 0, 0, 90deg); -webkit-transform: translateY(2.5vh) scale3d(0.9798, 0.9798, 0.9798) scale3d(0.5, 0.5, 0.5) rotate3d(1, 0, 0, 90deg); transform: translateY(2.5vh) scale3d(0.9798, 0.9798, 0.9798) scale3d(0.5, 0.5, 0.5) rotate3d(1, 0, 0, 90deg);
}
.container > .ball > .lng:nth-child(8) { -moz-transform: scale3d(0.5, 0.5, 0.5) rotate3d(0, 1, 0, 144deg); -ms-transform: scale3d(0.5, 0.5, 0.5) rotate3d(0, 1, 0, 144deg); -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate3d(0, 1, 0, 144deg); transform: scale3d(0.5, 0.5, 0.5) rotate3d(0, 1, 0, 144deg);
}
.container > .ball > .lat:nth-child(9) { -moz-transform: translateY(7.5vh) scale3d(0.8, 0.8, 0.8) scale3d(0.5, 0.5, 0.5) rotate3d(1, 0, 0, 90deg); -ms-transform: translateY(7.5vh) scale3d(0.8, 0.8, 0.8) scale3d(0.5, 0.5, 0.5) rotate3d(1, 0, 0, 90deg); -webkit-transform: translateY(7.5vh) scale3d(0.8, 0.8, 0.8) scale3d(0.5, 0.5, 0.5) rotate3d(1, 0, 0, 90deg); transform: translateY(7.5vh) scale3d(0.8, 0.8, 0.8) scale3d(0.5, 0.5, 0.5) rotate3d(1, 0, 0, 90deg);
}
.container > .ball > .lng:nth-child(10) { -moz-transform: scale3d(0.5, 0.5, 0.5) rotate3d(0, 1, 0, 180deg); -ms-transform: scale3d(0.5, 0.5, 0.5) rotate3d(0, 1, 0, 180deg); -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate3d(0, 1, 0, 180deg); transform: scale3d(0.5, 0.5, 0.5) rotate3d(0, 1, 0, 180deg);
}
html, body { width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; background: #333; color: #999; text-align: center;
}
CSS Spinning Wireframe Sphere - Script Codes
CSS Spinning Wireframe Sphere - Script Codes
Home Page Home
Developer Aaron Levine
Username Aldlevine
Uploaded January 30, 2023
Rating 4
Size 4,612 Kb
Views 6,072
Do you need developer help for CSS Spinning Wireframe Sphere?

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!

Aaron Levine (Aldlevine) Script Codes
Name
IOS-7 style slide-toggle
Price is Right Wheel - Better Inertia
Kaskade 0.3 - Desktop Demo
CRT TV Page Load Animation
Nav-Bar and Tab-Bar Layout
Colored Rain
Flashy Rating Page
Mobile App Design
Faceful Cubes
Random Gradients - JS
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!