3D Saturn

Developer
Bryan Jones
Size
5,044 Kb
Views
117,392
  1. 3D Saturn Previews
  2. 3D Saturn HTML Codes
  3. 3D Saturn CSS Codes
  4. 3D Saturn JS Codes

How do I make an 3d saturn?

An example of creating a 3D Saturn using transforms and rotations. . What is a 3d saturn? How do you make a 3d saturn? This script and codes were developed by Bryan Jones on 13 July 2022, Wednesday.

3D Saturn Previews
IQ Test

3D Saturn - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3D Saturn</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="tips"> <p>Move your mouse to change the view of the planet.</p> <p>Scroll in and out to change the perspective.</p>
</div>
<div id="wrapper"> <div id="planet"></div> <div id="ring-wrapper"> <div id="ring" class="ring"> <div class="ring-1 inner-ring"></div> <div class="ring-2 inner-ring"></div> <div class="ring-3 inner-ring"></div> <div class="ring-4 inner-ring"></div> <div class="ring-5 inner-ring"></div> <div class="ring-6 inner-ring"></div> <div class="ring-7 inner-ring"></div> <div class="ring-8 inner-ring"></div> <div class="ring-9 inner-ring"></div> <div class="ring-10 inner-ring"></div> </div> <div id="ring-back" class="ring"> <div class="ring-1 inner-ring"></div> <div class="ring-2 inner-ring"></div> <div class="ring-3 inner-ring"></div> <div class="ring-4 inner-ring"></div> <div class="ring-5 inner-ring"></div> <div class="ring-6 inner-ring"></div> <div class="ring-7 inner-ring"></div> <div class="ring-8 inner-ring"></div> <div class="ring-9 inner-ring"></div> <div class="ring-10 inner-ring"></div> </div> </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>

3D Saturn - Script Codes CSS Codes

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
html { background: url(http://www.bryanjones.us/sites/default/files/stars.png) repeat scroll left top #000; color: #fff; margin: 0; min-height: 100%; overflow: hidden; width: 100%;
}
#tips { background-color: rgba(50, 50, 50, 0.5); font-family: arial; padding: 5px 20px; width: 450px;
}
#wrapper { height: 100vw; left: calc(50% - 50vw); position: absolute; top: calc(50% - 50vw); width: 100vw; -moz-perspective: 1300px; -webkit-perspective: 1300px; perspective: 1300px; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
#planet { background-color: #716660; height: 30vw; left: calc(50% - 15vw); position: absolute; top: calc(50% - 15vw); width: 30vw; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF716660', endColorstr='#FF807563'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzcxNjY2MCIvPjxzdG9wIG9mZnNldD0iNyUiIHN0b3AtY29sb3I9IiM5NDdlNzAiLz48c3RvcCBvZmZzZXQ9IjEyJSIgc3RvcC1jb2xvcj0iIzlmODc2ZiIvPjxzdG9wIG9mZnNldD0iMTclIiBzdG9wLWNvbG9yPSIjZDNiMjg1Ii8+PHN0b3Agb2Zmc2V0PSIyMyUiIHN0b3AtY29sb3I9IiNkM2IyODUiLz48c3RvcCBvZmZzZXQ9IjI2JSIgc3RvcC1jb2xvcj0iI2QwYTk2ZSIvPjxzdG9wIG9mZnNldD0iNDQlIiBzdG9wLWNvbG9yPSIjZDBhOTZlIi8+PHN0b3Agb2Zmc2V0PSI0OCUiIHN0b3AtY29sb3I9IiNiYzk1NWUiLz48c3RvcCBvZmZzZXQ9IjUzJSIgc3RvcC1jb2xvcj0iI2NhYTQ2NiIvPjxzdG9wIG9mZnNldD0iNTclIiBzdG9wLWNvbG9yPSIjZjJjNjdkIi8+PHN0b3Agb2Zmc2V0PSI2MiUiIHN0b3AtY29sb3I9IiNlNGJjN2YiLz48c3RvcCBvZmZzZXQ9IjY3JSIgc3RvcC1jb2xvcj0iI2NlYWY3OSIvPjxzdG9wIG9mZnNldD0iNzYlIiBzdG9wLWNvbG9yPSIjYzFhOTgzIi8+PHN0b3Agb2Zmc2V0PSI4NCUiIHN0b3AtY29sb3I9IiNhYzk3N2EiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4MDc1NjMiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #716660), color-stop(7%, #947e70), color-stop(12%, #9f876f), color-stop(17%, #d3b285), color-stop(23%, #d3b285), color-stop(26%, #d0a96e), color-stop(44%, #d0a96e), color-stop(48%, #bc955e), color-stop(53%, #caa466), color-stop(57%, #f2c67d), color-stop(62%, #e4bc7f), color-stop(67%, #ceaf79), color-stop(76%, #c1a983), color-stop(84%, #ac977a), color-stop(100%, #807563)); background-image: -moz-linear-gradient(top, #716660 0%, #947e70 7%, #9f876f 12%, #d3b285 17%, #d3b285 23%, #d0a96e 26%, #d0a96e 44%, #bc955e 48%, #caa466 53%, #f2c67d 57%, #e4bc7f 62%, #ceaf79 67%, #c1a983 76%, #ac977a 84%, #807563 100%); background-image: -webkit-linear-gradient(top, #716660 0%, #947e70 7%, #9f876f 12%, #d3b285 17%, #d3b285 23%, #d0a96e 26%, #d0a96e 44%, #bc955e 48%, #caa466 53%, #f2c67d 57%, #e4bc7f 62%, #ceaf79 67%, #c1a983 76%, #ac977a 84%, #807563 100%); background-image: linear-gradient(to bottom, #716660 0%, #947e70 7%, #9f876f 12%, #d3b285 17%, #d3b285 23%, #d0a96e 26%, #d0a96e 44%, #bc955e 48%, #caa466 53%, #f2c67d 57%, #e4bc7f 62%, #ceaf79 67%, #c1a983 76%, #ac977a 84%, #807563 100%); -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
#ring-wrapper { height: 40vw; left: calc(50% - 20vw); position: absolute; top: calc(50% - 20vw); width: 40vw; z-index: 20; -moz-transform: rotateX(75deg); -ms-transform: rotateX(75deg); -webkit-transform: rotateX(75deg); transform: rotateX(75deg); -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
.ring { height: 40vw; left: calc(50% - 35vw); position: absolute; top: calc(50% - 35vw); width: 40vw; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
#ring { border: 15vw solid #63574B; -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -webkit-transform: rotateX(180deg); transform: rotateX(180deg); -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
#ring-back { border: 15vw solid #A0876D; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.inner-ring { height: 40vw; position: absolute; width: 40vw; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
}
.ring-1 { border: 13vw solid #322E2D; left: -13vw; top: -13vw;
}
.ring-2 { border: 12vw solid #71675B; left: -12vw; top: -12vw;
}
.ring-3 { border: 10.5vw solid #938374; left: -10.5vw; top: -10.5vw;
}
.ring-4 { border: 9.5vw solid #867561; left: -9.5vw; top: -9.5vw;
}
.ring-5 { border: 8vw solid #7F705D; left: -8vw; top: -8vw;
}
.ring-6 { border: 6vw solid #6C5C4D; left: -6vw; top: -6vw;
}
.ring-7 { border: 5vw solid #2A2925; left: -5vw; top: -5vw;
}
.ring-8 { border: 4.5vw solid #938374; left: -4.5vw; top: -4.5vw;
}
.ring-9 { border: 2vw solid #81776D; left: -2vw; top: -2vw;
}
.ring-10 { border: 1vw solid #473A34; left: -1vw; top: -1vw;
}
#ring .ring-1 { border-color: black;
}
#ring .ring-2 { border-color: #2a2722;
}
#ring .ring-3 { border-color: #4c433b;
}
#ring .ring-4 { border-color: #3c342b;
}
#ring .ring-5 { border-color: #352f27;
}
#ring .ring-6 { border-color: #221d18;
}
#ring .ring-7 { border-color: black;
}
#ring .ring-8 { border-color: #4c433b;
}
#ring .ring-9 { border-color: #3c3733;
}
#ring .ring-10 { border-color: black;
}

3D Saturn - Script Codes JS Codes

/** * Created by Bryan Jones. * * Works in Chrome. Can't seem to get * the transform style working in * Firefox. * * Javascript used to alter perspective. * */
$(document).ready(function() { // Set some defaults. rotation = 75; backPos = 60; backOffset = 0; offset = 0; counter = 0; $('html').mousemove(function(e) { if (window.offset == 0) { window.offset = e.pageY; } if (window.backOffset == 0) { window.backOffset = e.pageY; } var xMove = window.rotation + (e.pageY - window.offset) / 3; var yMove = e.pageX / 3; var bg = window.backPos - (e.pageY - window.offset) / 1.5; $('#ring-wrapper').css('transform', 'rotateX(' + xMove + 'deg)'); $('#ring-wrapper').css('-webkit-transform', 'rotateX(' + xMove + 'deg)'); $(this).css('background-position', e.pageX + 'px ' + e.pageY + 'px'); $('#planet').css('background-position', '0 ' + bg + 'px'); }); $('html').bind('mousewheel DOMMouseScroll wheel', function(e) { if (e.originalEvent.wheelDelta > 0) { // Run if the scroll in going up. window.counter-=20; } else { // Run if the scroll in going down. window.counter+=20; } $('#wrapper').css('perspective', 1300 + window.counter + 'px'); $('#wrapper').css('-webkit-perspective', 1300 + window.counter + 'px'); });
});
3D Saturn - Script Codes
3D Saturn - Script Codes
Home Page Home
Developer Bryan Jones
Username bartuc
Uploaded July 13, 2022
Rating 3.5
Size 5,044 Kb
Views 117,392
Do you need developer help for 3D Saturn?

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!

Bryan Jones (bartuc) Script Codes
Name
Vermhole
Lens Flare
Particles
Screens
Solar System Maker
Light Switch
Planet Awesome
Planet Rotation
Card Flip
Universe Zoom
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!