The world with CSS3 Transforms

Developer
Kevin Jannis
Size
5,001 Kb
Views
28,336
  1. The world with CSS3 Transforms Previews
  2. The world with CSS3 Transforms HTML Codes
  3. The world with CSS3 Transforms CSS Codes
  4. The world with CSS3 Transforms JS Codes

How do I make an the world with css3 transforms?

The world rendered and animated with CSS3 Transforms.(May not work in all browsers). What is a the world with css3 transforms? How do you make a the world with css3 transforms? This script and codes were developed by Kevin Jannis on 21 August 2022, Sunday.

The world with CSS3 Transforms Previews
IQ Test

The world with CSS3 Transforms - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>The world with CSS3 Transforms</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="world"></div>
<div id="controls-wrapper"><div id="controls"> <label for="select-detail">level of detail:</label> <select name="select-detail" id="select-detail"> <option value="16">16</option> <option value="20">20</option> <option value="24" selected="selected">24</option> <option value="28">28</option> <option value="32">32</option> </select> <label for="select-map">map:</label> <select name="select-map" id="select-map"> <option value="0">Vintage</option> <option value="1" selected="selected">Nasa</option> <option value="2">Mario World</option> <option value="3">Jupiter</option> </select> </div></div> <script src="js/index.js"></script>
</body>
</html>

The world with CSS3 Transforms - Script Codes CSS Codes

* { box-sizing: border-box;
}
html { width: 100%; min-height: 100%; background: #232323; background: #7d7e7d; background: -moz-radial-gradient(center, ellipse cover, #7d7e7d 0%, #0e0e0e 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #7d7e7d), color-stop(100%, #0e0e0e)); background: -webkit-radial-gradient(center, ellipse cover, #7d7e7d 0%, #0e0e0e 100%); background: -o-radial-gradient(center, ellipse cover, #7d7e7d 0%, #0e0e0e 100%); background: -ms-radial-gradient(center, ellipse cover, #7d7e7d 0%, #0e0e0e 100%); background: radial-gradient(ellipse at center, #7d7e7d 0%, #0e0e0e 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7d7e7d',endColorstr='#0e0e0e',GradientType=1); background-repeat: no-repeat; background-size: 100% 100%;
}
body { font-family: sans-serif; text-align: center; padding: 50px 10px 150px;
}
label, select { float: left; display: inline-block; margin-bottom: 5px;
}
label { padding-right: 20px; width: 140px;
}
select { width: 140px;
}
select + label { clear: both;
}
label + select + label, label + select + label + select { margin-top: 10px;
}
#world { -webkit-animation: spin 20s 0 linear infinite; animation: spin 20s 0 linear infinite; display: inline-block; transform-origin: center center 0; transform-style: preserve-3d; backface-visibility: hidden; vertical-align: middle;
}
#world > div { position: absolute; background: #666; background: #000; top: 50%; left: 50%; transform-origin: center center 0; transform-style: preserve-3d; backface-visibility: hidden;
}
#controls-wrapper { position: absolute; display: block; bottom: 0; left: 0; right: 0; width: 100%;
}
#controls { position: relative; display: inline-block; background: #f9f9f9; border: solid 1px #232323; color: #232323; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); padding: 20px 30px; vertical-align: middle; text-align: right;
}
@-webkit-keyframes spin { from { transform: rotateY(0deg); } to { transform: rotateY(-360deg); }
}
@-moz-keyframes spin { from { transform: rotateY(0deg); } to { transform: rotateY(-360deg); }
}
@keyframes spin { from { transform: rotateY(0deg); } to { transform: rotateY(-360deg); }
}

The world with CSS3 Transforms - Script Codes JS Codes

/*
The world with CSS3 Transforms.
Made by Kevin Jannis (@kevinjannis)
View more at www.janniskev.in
*/
// Generates the world
var Point=function(e,t){this.x=e;this.y=t};Point.prototype.rotateAroundOrigin=function(e,t){var n=this;var r=Math.cos(t)*(n.x-e.x)-Math.sin(t)*(n.y-e.y)+e.x;var i=Math.sin(t)*(n.x-e.x)+Math.cos(t)*(n.y-e.y)+e.y;return new Point(r,i)};Point.prototype.distanceTo=function(e){var t=Math.pow(e.x-this.x,2);var n=Math.pow(e.y-this.y,2);return Math.sqrt(t+n)};var Dot=function(e,t,n,r,i){e=e||0;t=t||0;n=n||0;r=r||0;i=i||0;this.x=Math.ceil(e*100)/100;this.y=Math.ceil(t*100)/100;this.z=Math.ceil(n*100)/100;this.angleX=Math.ceil(r*100)/100;this.angleY=Math.ceil(i*100)/100};var World=function(e,t,n){this.detailLevel=Math.max(t,3);this.radius=150;this.diameter=this.radius*2;this.circumference=this.diameter*Math.PI;this.background=n.image;this.backgroundWidth=n.width;this.backgroundHeight=n.height;this.el=document.getElementById(e);this.el.innerHTML="";this.el.style.width=this.el.style.height=this.diameter+"px";this.center=new Dot(0,0,0,Math.PI/2,0);this.top=new Dot(this.center.x,this.center.y-this.radius,this.center.z,Math.PI/2,0);this.bottom=new Dot(this.center.x,this.center.y+this.radius,this.center.z,-Math.PI/2,0);this.prepare();this.render()};World.prototype.prepare=function(){var e=Math.PI/(this.detailLevel-1);this.rows=[];this.rows.push({dots:[this.top],width:0,height:0});for(var t=1;t<this.detailLevel-1;t++){var n=e*t;var r=new Point(this.top.z,this.top.y);var i=new Point(this.center.z,this.center.y);var s=r.rotateAroundOrigin(i,n);var o=n-Math.PI/2;var u=new Dot(this.top.x,s.y,s.x,-o,0);var a=new Dot(this.top.x,s.y,this.top.z,0,0);var f={dots:[],width:0,height:0};for(var l=0;l<this.detailLevel-1;l++){var c=e*2*l-Math.PI/2;var h=new Point(u.x,u.z);var p=new Point(a.x,a.z);var s=h.rotateAroundOrigin(p,c);var d=new Dot(s.x,u.y,s.y,u.angleX,-c);f.dots.push(d)}this.rows.push(f)}this.rows.push({dots:[this.bottom],width:0,height:0});for(var t=0;t<this.rows.length-1;t++){var f=this.rows[t];for(var l=0;l<f.dots.length-1;l++){var v=Math.min(l,f.dots.length-1);var m=Math.min(v+1,f.dots.length-1);var g=this.rows[t+1];var y=Math.min(l,g.dots.length-1);var b=Math.min(v+1,g.dots.length-1);var w=f.dots[v];var E=f.dots[m];var S=g.dots[y];var x=g.dots[b];var T=(new Point(w.x,w.z)).distanceTo(new Point(E.x,E.z));var N=(new Point(S.x,S.z)).distanceTo(new Point(x.x,x.z));var C=(new Point(w.y,w.z)).distanceTo(new Point(S.y,S.z));var k=(new Point(E.y,E.z)).distanceTo(new Point(x.y,x.z));f.width=Math.max(f.width,Math.max(T,N));f.height=Math.max(f.height,Math.max(C,k))}}};World.prototype.render=function(){for(var e=0;e<this.rows.length-1;e++){var t=this.rows[e];for(var n=0;n<t.dots.length;n++){var r=t.dots[n];this.renderMapPart(r,t,n,e)}}};World.prototype.renderMapPart=function(e,t,n,r){var i=document.createElement("div");var s=t.width+2;var o=t.height+2;i.style.width=s+"px";i.style.height=o+"px";i.style.zIndex=n*this.detailLevel+r;i.style.background="url("+this.background+")";i.style.backgroundRepeat="no-repeat";i.style.backgroundSize=this.circumference+"px "+this.circumference/2+"px";i.style.backgroundPosition=this.circumference/this.detailLevel*(n-this.detailLevel+1)+"px "+this.circumference/2/this.detailLevel*-r+"px";i.style.transform="translate3d("+(e.x-s/2)+"px, "+(e.y-o/2)+"px, "+e.z+"px)";i.style.transform+="rotateY("+e.angleY*180/Math.PI+"deg) rotateX("+e.angleX*180/Math.PI+"deg)";this.el.appendChild(i)};World.prototype.renderSquare=function(e){var t=document.createElement("div");var n=4;var r=4;t.style.marginTop=this.height/-2+"px";t.style.marginLeft=this.width/-2+"px";t.style.width=n+"px";t.style.height=r+"px";t.style.transform="translate3d("+(e.x-n/2)+"px, "+(e.y-r/2)+"px, "+e.z+"px)";t.style.transform+="rotateY("+e.angleY*180/Math.PI+"deg) rotateX("+e.angleX*180/Math.PI+"deg)";this.el.appendChild(t)}
// Controls part
var maps=[{image:"http://www.hddesktopbackgrounds.us/backgrounds-images/1920x1080/b48ti-wallpapers-091421358-1920x1080.jpg",width:1920,height:1080},{image:"http://www.nnvl.noaa.gov/images/globaldata/SnowIceCover_Daily.png",width:4096,height:2048},{image:"http://static.fjcdn.com/large/pictures/7d/42/7d42db_3928943.jpg",width:780,height:488},{image:"http://laps.noaa.gov/albers/sos/jupiter/jupiter/jupiter_rgb_cyl_www.jpg",width:4096,height:2048}];var Controls=function(e){var t=this;this.el=document.getElementById(e);var n=document.getElementById("select-detail");var r=document.getElementById("select-map");n.onchange=function(){t.detail=n.value;t.updateWorld()};r.onchange=function(){t.map=r.value;t.updateWorld()};this.detail=n.value;this.map=r.value;this.updateWorld()};Controls.prototype.updateWorld=function(){this.world=new World("world",this.detail,maps[this.map])};new Controls("controls")
The world with CSS3 Transforms - Script Codes
The world with CSS3 Transforms - Script Codes
Home Page Home
Developer Kevin Jannis
Username kevinjannis
Uploaded August 21, 2022
Rating 4
Size 5,001 Kb
Views 28,336
Do you need developer help for The world with CSS3 Transforms?

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!

Kevin Jannis (kevinjannis) Script Codes
Name
V for Vendetta
Flat Star Wars
Vintage TV
White House
Simple float label
Star Wars The Force Awakens Speeder
DC vs. Marvel
A Pen by Kevin Jannis
Earth in a single HTML element
Google Chrome logos in CSS
Create amazing video scripts 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!