3D Pyramid Animation

Developer

Size

4,521 Kb

Views

56,672

3D Pyramid Animation Previews
3D Pyramid Animation HTML Codes
3D Pyramid Animation CSS Codes

How do I make an 3d pyramid animation?

Simple 3D Pyramid animation using only css. What is a 3d pyramid animation? How do you make a 3d pyramid animation? This script and codes were developed by Mario Duarte on 04 August 2022, Thursday.

3D Pyramid Animation Previews

3D Pyramid Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3D Pyramid Animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Lat'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>	<div class="container">	<div id="piramid">	<figure class="front"></figure>	<figure class="back"></figure>	<figure class="right"></figure>	<figure class="left"></figure>	<figure class="bottom"></figure>	</div>	</div>	<div class="content">	<h1>3D pyramid animation</h1>	<p>	<span><a href="https://twitter.com/MDesignsuk" target="_blank"><i class="fa fa-twitter"></i></a></span>	<span><a href="https://github.com/Mario-Duarte/" target="_blank"><i class="fa fa-github"></i></a></span>	<span><a href="https://bitbucket.org/Mario_Duarte/" target="_blank"><i class="fa fa-bitbucket"></i></a></span>	<span><a href="http://codepen.io/MarioDesigns/" target="_blank"><i class="fa fa-codepen"></i></a></span>	</p>	<p>BY: Mario Duarte</p>	</div>
</body>
</html>

3D Pyramid Animation - Script Codes CSS Codes

@-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; }
}
@-webkit-keyframes animateFront { 0% { transform: rotateY(0deg) translateZ(155px) translateY(-5px) rotatex(26.565deg); -webkit-transform: rotateY(0deg) translateZ(155px) translateY(-5px) rotatex(26.565deg); -moz-transform: rotateY(0deg) translateZ(155px) translateY(-5px) rotatex(26.565deg); -ms-trasform: rotateY(0deg) translateZ(155px) translateY(-5px) rotatex(26.565deg); opacity: 0; } 50% { opacity: 0; } 100% { transform: rotateY(0deg) translateZ(25px) translateY(-5px) rotatex(26.565deg); -webkit-transform: rotateY(0deg) translateZ(25px) translateY(-5px) rotatex(26.565deg); -moz-transform: rotateY(0deg) translateZ(25px) translateY(-5px) rotatex(26.565deg); -ms-trasform: rotateY(0deg) translateZ(25px) translateY(-5px) rotatex(26.565deg); opacity: 0.6; }
}
@keyframes animateFront { 0% { transform: rotateY(0deg) translateZ(155px) translateY(-5px) rotatex(26.565deg); -webkit-transform: rotateY(0deg) translateZ(155px) translateY(-5px) rotatex(26.565deg); -moz-transform: rotateY(0deg) translateZ(155px) translateY(-5px) rotatex(26.565deg); -ms-trasform: rotateY(0deg) translateZ(155px) translateY(-5px) rotatex(26.565deg); opacity: 0; } 50% { opacity: 0; } 100% { transform: rotateY(0deg) translateZ(25px) translateY(-5px) rotatex(26.565deg); -webkit-transform: rotateY(0deg) translateZ(25px) translateY(-5px) rotatex(26.565deg); -moz-transform: rotateY(0deg) translateZ(25px) translateY(-5px) rotatex(26.565deg); -ms-trasform: rotateY(0deg) translateZ(25px) translateY(-5px) rotatex(26.565deg); opacity: 0.6; }
}
@-webkit-keyframes animateBack { 0% { transform: rotateY(180deg) translateZ(155px) translateY(-5px) rotatex(26.565deg) rotateZ(180deg); -webkit-transform: rotateY(180deg) translateZ(155px) translateY(-5px) rotatex(26.565deg) rotateZ(180deg); -moz-transform: rotateY(180deg) translateZ(155px) translateY(-5px) rotatex(26.565deg) rotateZ(180deg); -ms-trasform: rotateY(180deg) translateZ(155px) translateY(-5px) rotatex(26.565deg) rotateZ(180deg); opacity: 0; } 50% { opacity: 0; } 100% { transform: rotateY(180deg) translateZ(25px) translateY(-5px) rotatex(26.565deg) rotateZ(180deg); -webkit-transform: rotateY(180deg) translateZ(25px) translateY(-5px) rotatex(26.565deg) rotateZ(180deg); -moz-transform: rotateY(180deg) translateZ(25px) translateY(-5px) rotatex(26.565deg) rotateZ(180deg); -ms-trasform: rotateY(180deg) translateZ(25px) translateY(-5px) rotatex(26.565deg) rotateZ(180deg); opacity: 0.6; }
}
@keyframes animateBack { 0% { transform: rotateY(180deg) translateZ(155px) translateY(-5px) rotatex(26.565deg) rotateZ(180deg); -webkit-transform: rotateY(180deg) translateZ(155px) translateY(-5px) rotatex(26.565deg) rotateZ(180deg); -moz-transform: rotateY(180deg) translateZ(155px) translateY(-5px) rotatex(26.565deg) rotateZ(180deg); -ms-trasform: rotateY(180deg) translateZ(155px) translateY(-5px) rotatex(26.565deg) rotateZ(180deg); opacity: 0; } 50% { opacity: 0; } 100% { transform: rotateY(180deg) translateZ(25px) translateY(-5px) rotatex(26.565deg) rotateZ(180deg); -webkit-transform: rotateY(180deg) translateZ(25px) translateY(-5px) rotatex(26.565deg) rotateZ(180deg); -moz-transform: rotateY(180deg) translateZ(25px) translateY(-5px) rotatex(26.565deg) rotateZ(180deg); -ms-trasform: rotateY(180deg) translateZ(25px) translateY(-5px) rotatex(26.565deg) rotateZ(180deg); opacity: 0.6; }
}
@-webkit-keyframes animateRight { 0% { transform: rotateY(90deg) translateZ(155px) translateY(-5px) rotatex(26.565deg) rotateZ(0deg); -webkit-transform: rotateY(90deg) translateZ(155px) translateY(-5px) rotatex(26.565deg) rotateZ(0deg); -moz-transform: rotateY(90deg) translateZ(155px) translateY(-5px) rotatex(26.565deg) rotateZ(0deg); -ms-trasform: rotateY(90deg) translateZ(155px) translateY(-5px) rotatex(26.565deg) rotateZ(0deg); opacity: 0; } 50% { opacity: 0; } 100% { transform: rotateY(90deg) translateZ(25px) translateY(-5px) rotatex(26.565deg) rotateZ(0deg); -webkit-transform: rotateY(90deg) translateZ(25px) translateY(-5px) rotatex(26.565deg) rotateZ(0deg); -moz-transform: rotateY(90deg) translateZ(25px) translateY(-5px) rotatex(26.565deg) rotateZ(0deg); -ms-trasform: rotateY(90deg) translateZ(25px) translateY(-5px) rotatex(26.565deg) rotateZ(0deg); opacity: 0.6; }
}
@keyframes animateRight { 0% { transform: rotateY(90deg) translateZ(155px) translateY(-5px) rotatex(26.565deg) rotateZ(0deg); -webkit-transform: rotateY(90deg) translateZ(155px) translateY(-5px) rotatex(26.565deg) rotateZ(0deg); -moz-transform: rotateY(90deg) translateZ(155px) translateY(-5px) rotatex(26.565deg) rotateZ(0deg); -ms-trasform: rotateY(90deg) translateZ(155px) translateY(-5px) rotatex(26.565deg) rotateZ(0deg); opacity: 0; } 50% { opacity: 0; } 100% { transform: rotateY(90deg) translateZ(25px) translateY(-5px) rotatex(26.565deg) rotateZ(0deg); -webkit-transform: rotateY(90deg) translateZ(25px) translateY(-5px) rotatex(26.565deg) rotateZ(0deg); -moz-transform: rotateY(90deg) translateZ(25px) translateY(-5px) rotatex(26.565deg) rotateZ(0deg); -ms-trasform: rotateY(90deg) translateZ(25px) translateY(-5px) rotatex(26.565deg) rotateZ(0deg); opacity: 0.6; }
}
@-webkit-keyframes animateLeft { 0% { transform: rotateY(-90deg) translateZ(155px) translateY(-5px) rotatex(26.565deg) rotateZ(0deg); -webkit-transform: rotateY(-90deg) translateZ(155px) translateY(-5px) rotatex(26.565deg) rotateZ(0deg); -moz-transform: rotateY(-90deg) translateZ(155px) translateY(-5px) rotatex(26.565deg) rotateZ(0deg); -ms-trasform: rotateY(-90deg) translateZ(155px) translateY(-5px) rotatex(26.565deg) rotateZ(0deg); opacity: 0; } 50% { opacity: 0; } 100% { transform: rotateY(-90deg) translateZ(25px) translateY(-5px) rotatex(26.565deg) rotateZ(0deg); -webkit-transform: rotateY(-90deg) translateZ(25px) translateY(-5px) rotatex(26.565deg) rotateZ(0deg); -moz-transform: rotateY(-90deg) translateZ(25px) translateY(-5px) rotatex(26.565deg) rotateZ(0deg); -ms-trasform: rotateY(-90deg) translateZ(25px) translateY(-5px) rotatex(26.565deg) rotateZ(0deg); opacity: 0.6; }
}
@keyframes animateLeft { 0% { transform: rotateY(-90deg) translateZ(155px) translateY(-5px) rotatex(26.565deg) rotateZ(0deg); -webkit-transform: rotateY(-90deg) translateZ(155px) translateY(-5px) rotatex(26.565deg) rotateZ(0deg); -moz-transform: rotateY(-90deg) translateZ(155px) translateY(-5px) rotatex(26.565deg) rotateZ(0deg); -ms-trasform: rotateY(-90deg) translateZ(155px) translateY(-5px) rotatex(26.565deg) rotateZ(0deg); opacity: 0; } 50% { opacity: 0; } 100% { transform: rotateY(-90deg) translateZ(25px) translateY(-5px) rotatex(26.565deg) rotateZ(0deg); -webkit-transform: rotateY(-90deg) translateZ(25px) translateY(-5px) rotatex(26.565deg) rotateZ(0deg); -moz-transform: rotateY(-90deg) translateZ(25px) translateY(-5px) rotatex(26.565deg) rotateZ(0deg); -ms-trasform: rotateY(-90deg) translateZ(25px) translateY(-5px) rotatex(26.565deg) rotateZ(0deg); opacity: 0.6; }
}
@-webkit-keyframes rotatePiramid { 25% { transform: rotateY(90deg) rotateX(-10deg) rotateZ(0deg); -webkit-transform: rotateY(90deg) rotateX(-10deg) rotateZ(0deg); -moz-transform: rotateY(90deg) rotateX(-10deg) rotateZ(0deg); -ms-trasform: rotateY(90deg) rotateX(-10deg) rotateZ(0deg); } 50% { transform: rotateY(180deg) rotateX(-20deg) rotateZ(0deg); -webkit-transform: rotateY(180deg) rotateX(-20deg) rotateZ(0deg); -moz-transform: rotateY(180deg) rotateX(-20deg) rotateZ(0deg); -ms-trasform: rotateY(180deg) rotateX(-20deg) rotateZ(0deg); } 75% { transform: rotateY(270deg) rotateX(30deg) rotateZ(0deg); -webkit-transform: rotateY(270deg) rotateX(30deg) rotateZ(0deg); -moz-transform: rotateY(270deg) rotateX(30deg) rotateZ(0deg); -ms-trasform: rotateY(270deg) rotateX(30deg) rotateZ(0deg); } 100% { transform: rotateY(360deg) rotateX(0deg) rotateZ(0deg); -webkit-transform: rotateY(360deg) rotateX(0deg) rotateZ(0deg); -moz-transform: rotateY(360deg) rotateX(0deg) rotateZ(0deg); -ms-trasform: rotateY(360deg) rotateX(0deg) rotateZ(0deg); }
}
@keyframes rotatePiramid { 25% { transform: rotateY(90deg) rotateX(-10deg) rotateZ(0deg); -webkit-transform: rotateY(90deg) rotateX(-10deg) rotateZ(0deg); -moz-transform: rotateY(90deg) rotateX(-10deg) rotateZ(0deg); -ms-trasform: rotateY(90deg) rotateX(-10deg) rotateZ(0deg); } 50% { transform: rotateY(180deg) rotateX(-20deg) rotateZ(0deg); -webkit-transform: rotateY(180deg) rotateX(-20deg) rotateZ(0deg); -moz-transform: rotateY(180deg) rotateX(-20deg) rotateZ(0deg); -ms-trasform: rotateY(180deg) rotateX(-20deg) rotateZ(0deg); } 75% { transform: rotateY(270deg) rotateX(30deg) rotateZ(0deg); -webkit-transform: rotateY(270deg) rotateX(30deg) rotateZ(0deg); -moz-transform: rotateY(270deg) rotateX(30deg) rotateZ(0deg); -ms-trasform: rotateY(270deg) rotateX(30deg) rotateZ(0deg); } 100% { transform: rotateY(360deg) rotateX(0deg) rotateZ(0deg); -webkit-transform: rotateY(360deg) rotateX(0deg) rotateZ(0deg); -moz-transform: rotateY(360deg) rotateX(0deg) rotateZ(0deg); -ms-trasform: rotateY(360deg) rotateX(0deg) rotateZ(0deg); }
}
@-webkit-keyframes changePrespective { from { -webkit-perspective: 100px; perspective: 100px; } to { -webkit-perspective: 1000px; perspective: 1000px; }
}
@keyframes changePrespective { from { -webkit-perspective: 100px; perspective: 100px; } to { -webkit-perspective: 1000px; perspective: 1000px; }
}
body { margin: 0; padding: 0 20px; font-family: 'Lato', sans-serif; height: 100%; background-color: #eeeeee; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-trasform: translate3d(0, 0, 0);
}
.container { width: 100px; height: 100px; position: relative; -webkit-perspective: 100px; perspective: 100px; margin: 150px auto 50px auto; -webkit-animation: changePrespective 3s linear 2s 1 forwards; animation: changePrespective 3s linear 2s 1 forwards;
}
.container #piramid { width: 100%; height: 100%; position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; box-sizing: border-box; transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg); -webkit-transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg); -moz-transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg); -ms-trasform: rotateY(0deg) rotateX(0deg) rotateZ(0deg); -webkit-animation: rotatePiramid 15s linear 2s infinite forwards; animation: rotatePiramid 15s linear 2s infinite forwards;
}
.container #piramid figure { position: absolute; margin: 0; width: 100px; height: 100px; display: block; box-sizing: border-box; opacity: 0;
}
.container #piramid figure.front { transform: rotateY(0deg) translateZ(100px) translateY(50px) rotatex(-90deg); -webkit-transform: rotateY(0deg) translateZ(100px) translateY(50px) rotatex(-90deg); -moz-transform: rotateY(0deg) translateZ(100px) translateY(50px) rotatex(-90deg); -ms-trasform: rotateY(0deg) translateZ(100px) translateY(50px) rotatex(-90deg); width: 100px; height: 111.8034px; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 111.8034px solid #217dbb; border-top: 0px solid transparent; -webkit-animation: animateFront 1s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1s 1 forwards; animation: animateFront 1s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1s 1 forwards;
}
.container #piramid figure.back { transform: rotateY(180deg) translateZ(100px) translateY(50px) rotatex(90deg); -webkit-transform: rotateY(180deg) translateZ(100px) translateY(50px) rotatex(90deg); -moz-transform: rotateY(180deg) translateZ(100px) translateY(50px) rotatex(90deg); -ms-trasform: rotateY(180deg) translateZ(100px) translateY(50px) rotatex(90deg); width: 100px; height: 111.8034; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 0px solid transparent; border-top: 111.8034px solid #217dbb; -webkit-animation: animateBack 1s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1s 1 forwards; animation: animateBack 1s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1s 1 forwards;
}
.container #piramid figure.right { transform: rotateY(90deg) translateZ(100px) translateY(50px) rotatex(-90deg); -webkit-transform: rotateY(90deg) translateZ(100px) translateY(50px) rotatex(-90deg); -moz-transform: rotateY(90deg) translateZ(100px) translateY(50px) rotatex(-90deg); -ms-trasform: rotateY(90deg) translateZ(100px) translateY(50px) rotatex(-90deg); width: 100px; height: 111.8034; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 111.8034px solid #4aa3df; border-top: 0px solid transparent; -webkit-animation: animateRight 1s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1s 1 forwards; animation: animateRight 1s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1s 1 forwards;
}
.container #piramid figure.left { transform: rotateY(-90deg) translateZ(100px) translateY(50px) rotatex(-90deg); -webkit-transform: rotateY(-90deg) translateZ(100px) translateY(50px) rotatex(-90deg); -moz-transform: rotateY(-90deg) translateZ(100px) translateY(50px) rotatex(-90deg); -ms-trasform: rotateY(-90deg) translateZ(100px) translateY(50px) rotatex(-90deg); width: 100px; height: 111.8034; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 111.8034px solid #4aa3df; border-top: 0px solid transparent; -webkit-animation: animateLeft 1s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1s 1 forwards; animation: animateLeft 1s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1s 1 forwards;
}
.container #piramid figure.bottom { transform: rotateX(-90deg) translateZ(50px); -webkit-transform: rotateX(-90deg) translateZ(50px); -moz-transform: rotateX(-90deg) translateZ(50px); -ms-trasform: rotateX(-90deg) translateZ(50px); width: 100px; height: 100px; background-color: #999999; opacity: 0.8; -webkit-animation: fadeIn 1s linear 0s 1 forwards; animation: fadeIn 1s linear 0s 1 forwards;
}
.content { width: 100%; max-width: 600px; margin: 100px auto 0 auto; text-align: center;
}
.content h1 { color: #999999; font-weight: 300; font-size: 22px;
}
.content a { color: #999999; font-size: 16px; padding: 0 10px;
}
.content a:hover { color: #3498db;
}
.content p:not(span) { color: #dddddd; font-size: 14px;
}

Home Page	Home
Developer	Mario Duarte
Username	MarioDesigns
Uploaded	August 04, 2022
Rating	3
Size	4,521 Kb
Views	56,672

Do you need developer help for 3D Pyramid Animation?

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!

Mario Duarte (MarioDesigns) Script Codes

Name	Size
Floating Loading Animation	3,660 Kb
Carbon Atom Animation	5,507 Kb
Flying Bird Animation	2,873 Kb
Arcade Buttons	3,213 Kb
Popular Pens with ReactJS	5,327 Kb
Diamond - Pure CSS	3,300 Kb
Relative Mouse Position	3,539 Kb
MDesigns Animated Background	2,888 Kb
CSS 3D loading	2,261 Kb
Floating Particles	13,587 Kb

Create amazing Facebook ads 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!

Similar Scripts & Codes

Name	Username	Size
Angular-HAML	Cwacht	2,022 Kb
Owl Carousel - jumpTo	OwlFonk	2,553 Kb
Gulpfile	Aimhigherwebdesign-amy	1,765 Kb
Polygon Dodecahedron in CSS	Vennsoh	7,606 Kb
Pure CSS Torch Light	Juliendargelos	2,727 Kb
Hamburger Menu Animation	Salmanraza	2,580 Kb
Expandable Left Side Bar with jQuery animate	Retrofuturistic	2,483 Kb
Background Images	Jooonebug	2,100 Kb
Marching Squares Visualized	Sakri	7,074 Kb
A Pen by Brendan Skousen	Bskousen	2,954 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!