Hello World

Developer
Chris Hanson
Size
3,501 Kb
Views
12,144
  1. Hello World Previews
  2. Hello World HTML Codes
  3. Hello World CSS Codes

How do I make an hello world?

Playing with prespective and multiple 3d cubes.. What is a hello world? How do you make a hello world? This script and codes were developed by Chris Hanson on 01 October 2022, Saturday.

Hello World Previews
IQ Test

Hello World - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hello World</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <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! */ * { box-sizing: border-box;
}
.container { width: 600px; margin: 60px auto; text-align: center; perspective: 400px;
}
.cube { width: 80px; height: 80px; position: relative; display: inline-block; transform-style: preserve-3d; trasnform: translateZ(-40px); margin-left: 10px; animation: rot 3s linear infinite;
}
.cube .face:nth-child(1) { background: white; transform: translateZ(40px);
}
.cube .face:nth-child(2) { background: #333; color: white; transform: rotateX(-90deg) translateZ(40px);
}
.cube .face:nth-child(3) { transform: rotateY(-90deg) translateZ(40px);
}
.cube .face:nth-child(4) { transform: rotateY(90deg) translateZ(40px);
}
.cube .face:nth-child(5) { transform: rotateX(90deg) translateZ(40px);
}
.cube .face:nth-child(6) { transform: rotateX(180deg) translateZ(40px);
}
.face { width: 100%; height: 100%; border: 1px solid #d3d3d3; position: absolute; background: #e3e3e3; text-align: center; line-height: 80px; font-size: 36px; font-weight: bold; transform: translateZ(40px);
}
.cube-0 { animation-delay: 0s;
}
.cube-1 { animation-delay: 0.2s;
}
.cube-2 { animation-delay: 0.4s;
}
.cube-3 { z-index: -3; animation-delay: 0.6s;
}
.cube-4 { z-index: -4; animation-delay: 0.8s;
}
@keyframes rot { 20% { transform: rotateX(0deg); } 30% { transform: rotateX(90deg); } 70% { transform: rotateX(90deg); } 80% { transform: rotateX(0deg); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class='container'> <div class='cube cube-0'> <div class='face'> h </div> <div class='face'> w </div> <div class='face'></div> <div class='face'></div> <div class='face'></div> <div class='face'></div> </div> <div class='cube cube-1'> <div class='face'> e </div> <div class='face'> o </div> <div class='face'></div> <div class='face'></div> <div class='face'></div> <div class='face'></div> </div> <div class='cube cube-2'> <div class='face'> l </div> <div class='face'> r </div> <div class='face'></div> <div class='face'></div> <div class='face'></div> <div class='face'></div> </div> <div class='cube cube-3'> <div class='face'> l </div> <div class='face'> l </div> <div class='face'></div> <div class='face'></div> <div class='face'></div> <div class='face'></div> </div> <div class='cube cube-4'> <div class='face'> o </div> <div class='face'> d </div> <div class='face'></div> <div class='face'></div> <div class='face'></div> <div class='face'></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Hello World - Script Codes CSS Codes

* { box-sizing: border-box;
}
.container { width: 600px; margin: 60px auto; text-align: center; perspective: 400px;
}
.cube { width: 80px; height: 80px; position: relative; display: inline-block; transform-style: preserve-3d; trasnform: translateZ(-40px); margin-left: 10px; animation: rot 3s linear infinite;
}
.cube .face:nth-child(1) { background: white; transform: translateZ(40px);
}
.cube .face:nth-child(2) { background: #333; color: white; transform: rotateX(-90deg) translateZ(40px);
}
.cube .face:nth-child(3) { transform: rotateY(-90deg) translateZ(40px);
}
.cube .face:nth-child(4) { transform: rotateY(90deg) translateZ(40px);
}
.cube .face:nth-child(5) { transform: rotateX(90deg) translateZ(40px);
}
.cube .face:nth-child(6) { transform: rotateX(180deg) translateZ(40px);
}
.face { width: 100%; height: 100%; border: 1px solid #d3d3d3; position: absolute; background: #e3e3e3; text-align: center; line-height: 80px; font-size: 36px; font-weight: bold; transform: translateZ(40px);
}
.cube-0 { animation-delay: 0s;
}
.cube-1 { animation-delay: 0.2s;
}
.cube-2 { animation-delay: 0.4s;
}
.cube-3 { z-index: -3; animation-delay: 0.6s;
}
.cube-4 { z-index: -4; animation-delay: 0.8s;
}
@keyframes rot { 20% { transform: rotateX(0deg); } 30% { transform: rotateX(90deg); } 70% { transform: rotateX(90deg); } 80% { transform: rotateX(0deg); }
}
Hello World - Script Codes
Hello World - Script Codes
Home Page Home
Developer Chris Hanson
Username chrishanson
Uploaded October 01, 2022
Rating 3
Size 3,501 Kb
Views 12,144
Do you need developer help for Hello World?

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!

Chris Hanson (chrishanson) Script Codes
Name
Photo crop prototype
Rotating 3d cube
Uiselect ie8 issues
Fireworks
UI Select Multiselect
Search bar
Alternating rotating shaps
Lf layout
Css spinner
A Pen by Chris Hanson
Create amazing web content 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!