Skip to content

Instantly share code, notes, and snippets.

@vineeth-pappu

vineeth-pappu/futuristic-hud-with-3d-transform.markdown

Created January 17, 2021 07:38
Show Gist options
  • Save vineeth-pappu/5dcb99e2de15df4245fb51133d3f4184 to your computer and use it in GitHub Desktop.
Save vineeth-pappu/5dcb99e2de15df4245fb51133d3f4184 to your computer and use it in GitHub Desktop.
Download ZIP
Futuristic HUD with 3D transform
Raw
futuristic-hud-with-3d-transform.markdown
Raw
index.html
<!-- BETTER ON FULL SCREEN -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="css/style.min.css" />
</head>
<body>
<div class="container">
<div class="container-ring beginAnim">
<svg class="ringMain" viewBox="0 0 100 100" type="image/svg+xml" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="4" class="c1"></circle>
<circle cx="50" cy="50" r="5" class="c2"></circle>
<circle cx="50" cy="50" r="7" class="c3 c3-1-red"></circle>
<circle cx="50" cy="50" r="8.5" class="c3 c3-2"></circle>
<circle cx="50" cy="50" r="10" class="c3 c3-3"></circle>
<circle cx="50" cy="50" r="27" class="c4"></circle>
<circle cx="50" cy="50" r="28" class="c5"></circle>
<circle cx="50" cy="50" r="29" class="c6"></circle>
<circle cx="50" cy="50" r="43" class="c7"></circle>
<circle cx="50" cy="50" r="45" class="c8"></circle>
<circle cx="50" cy="50" r="46" class="c9"></circle>
<circle cx="50" cy="50" r="48" class="c10"></circle>
<circle cx="50" cy="50" r="49" class="c11"></circle>
</svg>
<div class="cpu">
<p>CPU</p>
<p>18%</p>
</div>
<div class="rotate-skew">
<div class="skew-square">
<div class="square-1"></div>
<div class="square-2"></div>
<div class="square-3"></div>
<div class="square-4"></div>
<div class="square-5"></div>
<div class="square-6"></div>
<div class="square-7"></div>
<div class="square-8"></div>
<div class="square-9"></div>
<div class="square-10"></div>
<div class="square-11"></div>
<div class="square-12"></div>
<div class="square-13"></div>
<div class="square-14"></div>
<div class="square-15"></div>
<div class="square-16"></div>
<div class="square-17"></div>
<div class="square-18"></div>
</div>
</div>
<div class="rectangle">
<div class="rectangle-2"></div>
<div class="rectangle-3"></div>
<div class="rectangle-4"></div>
<div class="rectangle-5"></div>
<div class="rectangle-6"></div>
<div class="rectangle-7"></div>
<div class="rectangle-8"></div>
<div class="rectangle-9"></div>
<div class="rectangle-10"></div>
<div class="rectangle-11"></div>
<div class="rectangle-12"></div>
<div class="rectangle-13"></div>
<div class="rectangle-14"></div>
<div class="rectangle-15"></div>
<div class="rectangle-16"></div>
<div class="rectangle-17"></div>
<div class="rectangle-18"></div>
<div class="rectangle-19"></div>
<div class="rectangle-20"></div>
<div class="rectangle-21"></div>
<div class="rectangle-22"></div>
<div class="rectangle-23"></div>
<div class="rectangle-24"></div>
</div>
<div class="symbol">
<div class="symbol-1"><p>M</p></div>
<div class="symbol-2"><p>A</p></div>
<div class="symbol-3"><p>C</p></div>
<div class="symbol-4"><p>></p></div>
<div class="symbol-5"><p>P</p></div>
<div class="symbol-6"><p>C</p></div>
</div>
</div>
<div class="interface">
<div class="interface-1"><p>3D</p></div>
<div class="interface-2"><p>BOOST</p></div>
<div class="interface-3"><p>INSPECT</p></div>
</div>
</div>
</body>
</html>
Raw
script.js
//BETTER ON FULL SCREEN
// MAIN ELEMENT
const containerElements = [...document.querySelectorAll('.container *')]
const ringMain = containerElements.find(item =>item.classList.contains('ringMain'))
const rectangleAll = containerElements.find(item =>item.classList.contains('rectangle'))
const skewAll = containerElements.find(item =>item.classList.contains('rotate-skew'))
const symbolAll = containerElements.find(item =>item.classList.contains('symbol'))
const cpuNumber = containerElements.find(item =>item.classList.contains('cpu'))
// CICLES
const cElements = [...document.querySelectorAll('.ringMain *')]
const c1 = cElements.find(item =>item.classList.contains('c1'))
const c2 = cElements.find(item =>item.classList.contains('c2'))
const c3 = cElements.find(item =>item.classList.contains('c3'))
const c4 = cElements.find(item =>item.classList.contains('c4'))
const c5 = cElements.find(item =>item.classList.contains('c5'))
const c6 = cElements.find(item =>item.classList.contains('c6'))
const c7 = cElements.find(item =>item.classList.contains('c7'))
const c8 = cElements.find(item =>item.classList.contains('c8'))
const c9 = cElements.find(item =>item.classList.contains('c9'))
const c10 = cElements.find(item =>item.classList.contains('c10'))
const c11 = cElements.find(item =>item.classList.contains('c11'))
// BUTTONS
const button3D = document.querySelector('.interface-1')
const buttonBoost = document.querySelector('.interface-2')
const buttonInspect = document.querySelector('.interface-3')
// OTHERS
const skewElements = [...document.querySelectorAll('.skew-square *')]
const symbolElements = [...document.querySelectorAll('.symbol *')]
const cpuElement = document.querySelector('.cpu :nth-child(2)')
const containerRing = document.querySelector('.container-ring')
// REMOVE BEGIN SCALE
setTimeout(() => {
containerRing.classList.remove('beginAnim')
}, 800);
// CHANGE NUMBER AND CPU
let numberPercent = 0
const changeSymbolCPU = () =>
{
const symboleArray = ["Q","W","E","R","T","Y","U","I","O","P","A","S","D","F","G","H","J","K","L","Z","X","C","V","B","N","M"]
const randomUn = Math.floor(Math.random()*(2));
symbolElements.forEach((element) =>
{
// element.innerHTML = symboleArray[randomNumber]
element.innerHTML = randomUn
})
numberPercent++
if (numberPercent>=100) {cpuElement.innerHTML = '100'}
else {cpuElement.innerHTML = numberPercent}
}
window.setInterval(changeSymbolCPU, 100)
changeSymbolCPU()
// BUTTONS
//BUTTONS 3D
button3D.addEventListener('click', () => {
containerRing.classList.toggle('rotate-container-ring')
skewAll.classList.toggle('skew-square-3d')
rectangleAll.classList.toggle('rectangle-3d')
symbolAll.classList.toggle('symbol-3d')
cpuNumber.classList.toggle('cpu-3d')
})
//BUTTONS BOOST
buttonBoost.addEventListener('click', () => {
skewElements.forEach((element) =>
{
element.classList.toggle('skew-square-boost')
})
skewAll.classList.toggle('skew-square-scale')
})
//BUTTONS INSPECT
buttonInspect.addEventListener('click', () => {
containerRing.classList.toggle('animation-container-ring')
})
Raw
style.scss
//BETTER ON FULL SCREEN
// VAR COLOR
$white: #ffffff;
$blue: #33ABB9;
$green: #184344;
$red: #BA2433;
$orange: #E8823A;
body
{
background: black;
font-family: 'Orbitron', sans-serif;
margin: 0;
overflow-x: hidden;
overflow-y: hidden;
}
.container
{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
.interface
{
color: $white;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
display: flex;
justify-content: space-around;
animation: beginAnim 0.8s 1 ease;
div
{
width: 150px;
border-radius: 10%;
border: 3px solid $blue;
box-shadow: 1px 1px 10px $blue;
background: $green;
display: flex;
justify-content: center;
align-items: center;
}
}
}
// RING CONTAINER
.container-ring
{
width: 80vw;
height: 80vh;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: calc(50% - 45vh);
left: calc(50% - 40vw);
transition: all 5s ease;
transform: rotateX(0deg);
will-change: transform;
perspective: 800px;
transform-style: preserve-3d;
.ringMain
{
width: 100%;
height: 100%;
z-index: 1;
// FOR ALL CIRCLE
circle
{
fill: none;
stroke-linecap: round;
transform-origin: 50% 50%;
will-change: transform;
stroke: $blue;
}
.c1
{
stroke-width: 0.1;
}
.c2
{
stroke-width: 0.1;
stroke-dasharray: 5, 10;
animation: rotate-c2 10s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
[class^=c3]
{
stroke-width: 1;
transform: rotate(-90deg);
animation: progress 10s ease-out forwards;
}
.c3-1-red
{
stroke: $red;
stroke-dasharray: 38, 100;
}
.c3-2
{
stroke-dasharray: 46, 100;
}
.c3-3
{
stroke-dasharray: 54, 100;
}
.c4
{
stroke-width: 0.5;
animation: rotate-c4 10s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.c5
{
stroke-width: 0.7;
stroke-dasharray: 40;
animation: rotate-c5 10s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.c6
{
stroke-width: 0.7;
stroke-dasharray: 10;
animation: rotate-c6 10s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.c7
{
stroke-width: 0.7;
stroke-dasharray: 0.3;
animation: rotate-c7 10s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.c8
{
stroke-width: 2;
stroke-dasharray: 30,100;
animation: rotate-c8 10s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.c9
{
stroke-width: 0.4;
stroke-dasharray: 20;
animation: rotate-c9 10s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.c10
{
stroke-width: 0.4;
stroke-dasharray: 80, 100;
animation: rotate-c10 10s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
.c11
{
stroke-width: 1;
stroke-dasharray: 80, 100;
animation: rotate-c11 10s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}
}
//CPU OBVIOUSLY
.cpu
{
position: absolute;
color: $blue;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
transition: transform 1s ease-out;
p
{
font-size: 0.8vw;
margin: 0;
}
}
// SKEW SQUARE
.rotate-skew {
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
will-change: transform;
z-index: -1;
transition: transform 1s ease-out;
.skew-square
{
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
will-change: transform;
animation: speed 2s infinite linear;
[class^="square"]
{
position: absolute;
background: $blue;
transform-origin: 50% 50%;
width: 25px;
height: 15px;
box-shadow: 1px 1px 10px $blue;
transition: all 1s ease-in;
will-change: transform;
}
.square-1{transform: rotate(0deg) translateY(-90px) skewX(-50deg);}
.square-2{transform: rotate(20deg) translateY(-90px) skewX(-50deg);}
.square-3{transform: rotate(40deg) translateY(-90px) skewX(-50deg);}
.square-4{transform: rotate(60deg) translateY(-90px) skewX(-50deg);}
.square-5{transform: rotate(80deg) translateY(-90px) skewX(-50deg);}
.square-6{transform: rotate(100deg) translateY(-90px) skewX(-50deg);}
.square-7{transform: rotate(120deg) translateY(-90px) skewX(-50deg);}
.square-8{transform: rotate(140deg) translateY(-90px) skewX(-50deg);}
.square-9{transform: rotate(160deg) translateY(-90px) skewX(-50deg);}
.square-10{transform: rotate(180deg) translateY(-90px) skewX(-50deg);}
.square-11{transform: rotate(200deg) translateY(-90px) skewX(-50deg);}
.square-12{transform: rotate(220deg) translateY(-90px) skewX(-50deg);}
.square-13{transform: rotate(240deg) translateY(-90px) skewX(-50deg);}
.square-14{transform: rotate(260deg) translateY(-90px) skewX(-50deg);}
.square-15{transform: rotate(280deg) translateY(-90px) skewX(-50deg);}
.square-16{transform: rotate(300deg) translateY(-90px) skewX(-50deg);}
.square-17{transform: rotate(320deg) translateY(-90px) skewX(-50deg);}
.square-18{transform: rotate(340deg) translateY(-90px) skewX(-50deg);}
}
}
// RECTANGLE AROUND SKEW SQUARE
.rectangle
{
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
will-change: transform;
transition: transform 1s ease-out;
[class^="rectangle"]
{
position: absolute;
background: $green;
border: 3px solid $blue;
border-radius: 20%;
width: 45px;
height: 25px;
}
.rectangle-2{transform: rotate(15deg) translateY(-140px);}
.rectangle-3{transform: rotate(30deg) translateY(-140px);}
.rectangle-4{transform: rotate(45deg) translateY(-140px);}
.rectangle-5{transform: rotate(60deg) translateY(-140px);}
.rectangle-6{transform: rotate(75deg) translateY(-140px);}
.rectangle-7{transform: rotate(90deg) translateY(-140px);}
.rectangle-8{transform: rotate(105deg) translateY(-140px);}
.rectangle-9{transform: rotate(120deg) translateY(-140px);}
.rectangle-10{transform: rotate(135deg) translateY(-140px);}
.rectangle-11{transform: rotate(150deg) translateY(-140px);}
.rectangle-12{transform: rotate(165deg) translateY(-140px);}
.rectangle-13{transform: rotate(180deg) translateY(-140px);}
.rectangle-14{transform: rotate(195deg) translateY(-140px);}
.rectangle-15{transform: rotate(210deg) translateY(-140px);}
.rectangle-16{transform: rotate(225deg) translateY(-140px);}
.rectangle-17{transform: rotate(240deg) translateY(-140px);}
.rectangle-18{transform: rotate(255deg) translateY(-140px);}
.rectangle-19{transform: rotate(270deg) translateY(-140px);}
.rectangle-20{transform: rotate(285deg) translateY(-140px);}
.rectangle-21{transform: rotate(300deg) translateY(-140px);}
.rectangle-22{transform: rotate(315deg) translateY(-140px);}
.rectangle-23{transform: rotate(330deg) translateY(-140px);}
.rectangle-24{transform: rotate(345deg) translateY(-140px);}
}
// SYMBOL O/1
.symbol
{
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: transform 1s ease-out;
[class^="symbol"]
{
position: absolute;
transform-origin: 50% 50%;
width: 30px;
height: 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: $white;
p
{
filter: drop-shadow(0.1px 0.1px 1px $white);
}
}
.symbol-1{transform: rotate(0deg) translateY(-200px);}
.symbol-2{transform: rotate(45deg) translateY(-200px) rotate(-45deg);}
.symbol-3{transform: rotate(315deg) translateY(-200px) rotate(-315deg);}
.symbol-4{transform: rotate(135deg) translateY(-200px) rotate(-135deg);}
.symbol-5{transform: rotate(180deg) translateY(-200px) rotate(-180deg);}
.symbol-6{transform: rotate(225deg) translateY(-200px) rotate(-225deg);}
}
}
/********************
/* CLASS ADD/REMOVE WITH JS
*/
// ANIMATION OF THE BEGINNING
.beginAnim
{animation: beginAnim 0.8s ease 0s 1;}
// WITH BUTTON 3D
.rotate-container-ring
{transform: rotateX(10deg) rotateY(40deg) translateY(40px) translateX(-120px);}
.cpu-3d
{transform: translateZ(420px);}
.skew-square-3d
{transform: translateZ(350px);}
.rectangle-3d
{transform: translateZ(250px);}
.symbol-3d
{transform: translateZ(150px);}
// WITH BUTTON BOOST
.skew-square-boost
{animation: changeColor 5s linear 1 forwards;}
.skew-square-scale
{transform: translateZ(50px) scale(5);}
// WITH BUTTON INSPECT
.animation-container-ring
{transform: perspective(200px) rotateX(70deg) rotate(360deg);}
// REMOVE THE PLAY BUTTON DURING THE ANIMATION
.remove-button
{display: none !important;}
/*********************************************************
* KEYFRAMES
**/
/// ANIMATION CSS
@keyframes beginAnim {
0% {transform: scale(0)}
100%{transform: scale(1);}
}
@keyframes speed {
0% {transform: rotate(0deg)}
100%{transform: rotate(360deg);}
}
@keyframes progress {
0% {stroke-dasharray: 0 100;}
}
// @keyframes animateRing
// {
// 25%{transform: rotateX(70deg);}
// 50% {transform: rotateX(70deg) rotate(360deg) translateZ(-550px);}
// 75% {transform: rotateX(70deg) rotate(0deg) translateZ(0px);}
// }
@keyframes changeColor {
0% {background: $blue; box-shadow: 1px 1px 10px $blue;}
25%{border-radius: 50%;}
50% {
background: $orange;
box-shadow: 1px 1px 10px $orange;
}
100% {
background: $red;
box-shadow: 1px 1px 10px $red;
}
}
/// ANIMATION SVG
@keyframes rotate-c2 {
0% {transform: rotate(0deg);}
10% {transform: rotate(90deg);}
30% {transform: rotate(180deg);}
60% {transform: rotate(3000deg);}
80% {transform: rotate(-40deg);}
100% {transform: rotate(0deg);}
};
@keyframes rotate-c4 {
0% {transform: rotate(0deg);}
10% {transform: rotate(20deg);}
30% {transform: rotate(50deg);}
60% {transform: rotate(90deg);}
80% {transform: rotate(-40deg);}
100% {transform: rotate(0deg);}
};
@keyframes rotate-c5 {
0% {transform: rotate(0deg);}
10% {transform: rotate(-90deg);}
30% {transform: rotate(40deg);}
50% {transform: rotate(120deg);}
60% {transform: rotate(90deg);}
90% {transform: rotate(300deg);}
100% {transform: rotate(0deg);}
};
@keyframes rotate-c6 {
0% {transform: rotate(0deg);}
10% {transform: rotate(70deg);}
30% {transform: rotate(40deg);}
50% {transform: rotate(20deg);}
60% {transform: rotate(100deg);}
90% {transform: rotate(180deg);}
100% {transform: rotate(0deg);}
};
@keyframes rotate-c7 {
0% {transform: rotate(0deg);}
10% {transform: rotate(80deg);}
30% {transform: rotate(50deg);}
60% {transform: rotate(80deg);}
80% {transform: rotate(150deg);}
100% {transform: rotate(0deg);}
};
@keyframes rotate-c8 {
0% {transform: rotate(0deg);}
10% {transform: rotate(40deg);}
30% {transform: rotate(80deg);}
60% {transform: rotate(-60deg);}
80% {transform: rotate(100deg);}
100% {transform: rotate(0deg);}
};
@keyframes rotate-c9 {
0% {transform: rotate(0deg);}
10% {transform: rotate(20deg);}
30% {transform: rotate(40deg);}
50% {transform: rotate(10deg);}
60% {transform: rotate(120deg);}
90% {transform: rotate(70deg);}
100% {transform: rotate(0deg) ;}
};
@keyframes rotate-c10 {
0% {transform: rotate(0deg);}
10% {transform: rotate(70deg);}
30% {transform: rotate(-40deg);}
50% {transform: rotate(20deg);}
60% {transform: rotate(100deg);}
90% {transform: rotate(180deg);}
100% {transform: rotate(0deg);}
};
@keyframes rotate-c11 {
0% {transform: rotate(0deg);}
10% {transform: rotate(80deg);}
30% {transform: rotate(50deg);}
60% {transform: rotate(80deg);}
80% {transform: rotate(150deg);}
100% {transform: rotate(0deg);;}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment