3D Star

Developer
Mghayour
Size
2,137 Kb
Views
26,312
  1. 3D Star Previews
  2. 3D Star HTML Codes
  3. 3D Star CSS Codes
  4. 3D Star JS Codes

How do I make an 3d star?

3D star maked from 8 blue triangels in 3D Space good sampel for CSS3 3D. What is a 3d star? How do you make a 3d star? This script and codes were developed by Mghayour on 31 October 2022, Monday.

3D Star Previews
IQ Test

3D Star - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3D Star</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="box3D"> <div class="shape_4vajhi shape_4vajhi1"> <div></div> <div></div> <div></div> <div></div> </div> <div class="shape_4vajhi shape_4vajhi2"> <div></div> <div></div> <div></div> <div></div> </div> <div>3D Star</div>
<a class="by" href="mailto:[email protected]">MGhayour</a> </div> <script src="js/index.js"></script>
</body>
</html>

3D Star - Script Codes CSS Codes

@-webkit-keyframes spin{ 0%{ -webkit-transform: rotateX(0deg) rotateY(0deg); } 100%{ -webkit-transform: rotateX(360deg) rotateY(360deg); }
}
body { -webkit-perspective: 500px;
}
.box3D{ position: relative; width: 200px; height: 250px; margin: 100px auto 0; -webkit-transform-style: preserve-3d; -webkit-animation-name: spin; -webkit-animation-duration: 8s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -webkit-user-select: none; -webkit-transition: 2s;
}
.box3D:hover{
}
.shape_4vajhi { position: absolute; left: 0; top: 0; width: 200px; height: 200px; -webkit-transform-style: preserve-3d;
}
.shape_4vajhi2{ -webkit-transform: translateY(56px) rotateX(180deg);
}
/*.shape_4vajhi.shape_4vajhi2 > div{ border-color: transparent transparent #F00 transparent;
}*/
.shape_4vajhi > div { position: absolute; left: 0; top: 0; width: 0px; height: 0px; border-style: solid; border-width: 0 100px 173px 100px; border-color: transparent transparent #007bff transparent; opacity: 0.4; }
.shape_4vajhi > div:nth-child(1) { -webkit-transform: rotateY(0deg) translateZ(28px) rotateX(20deg);
}
.shape_4vajhi > div:nth-child(2) { -webkit-transform: rotateY(120deg) translateZ(28px) rotateX(20deg);
}
.shape_4vajhi > div:nth-child(3) { -webkit-transform: rotateY(240deg) translateZ(28px) rotateX(20deg);
}
.shape_4vajhi > div:nth-child(4) { -webkit-transform: translateZ(-28px) translateY(79px) rotateX(90deg);
}
.by { display: block; position: absolute; width: 80px; height: 20px; bottom: 0; right: 0; color: #555; text-decoration: none;
}
.by:before { content: "by ";
}

3D Star - Script Codes JS Codes

/* Webkit ONLY */
3D Star - Script Codes
3D Star - Script Codes
Home Page Home
Developer Mghayour
Username mghayour
Uploaded October 31, 2022
Rating 3
Size 2,137 Kb
Views 26,312
Do you need developer help for 3D Star?

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!

Mghayour (mghayour) Script Codes
Name
MG Factory
Wp tab
Avn Slider
Ghost
Download Button
An other linear loader
Cloudy Sky
Border-radius
An other layout
Rainy cloud
Create amazing blog posts 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!