Css piramide

Developer

Size

2,681 Kb

Views

22,264

Css piramide Previews
Css piramide HTML Codes
Css piramide CSS Codes

How do I make an css piramide?

What is a css piramide? How do you make a css piramide? This script and codes were developed by Elena on 17 December 2022, Saturday.

Css piramide Previews

Css piramide - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>css piramide</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="box"> <div class="pyramid py-1"> <div class="pyramid__inner"> <div class="bit bit-1"><span>js</span></div> <div class="bit bit-2"></div> <div class="bit bit-3"></div> <div class="bit bit-4"><span>10%</span></div> </div> </div> <div class="pyramid py-2"> <div class="pyramid__inner"> <div class="bit bit-1"><span>html</span></div> <div class="bit bit-2"></div> <div class="bit bit-3"></div> <div class="bit bit-4"><span>30%</span></div> <div class="bit-5"></div> </div> </div> <div class="pyramid py-2 py-3"> <div class="pyramid__inner"> <div class="bit bit-1"><span>css</span></div> <div class="bit bit-2"></div> <div class="bit bit-3"></div> <div class="bit bit-4"><span>60%</span></div> <div class="bit-5"></div> <div class="bit-6"></div> </div> </div>
</div>
</body>
</html>

Css piramide - Script Codes CSS Codes

* { box-sizing: content-box;
}
body { background: #fffdf1;
}
.box { position: relative; width: 500px; height: 500px; margin: 0 auto;
}
/* ------------ 0 ------------ */
.pyramid { width: 200px; height: 200px; margin: 3em auto -2rem; position: absolute; left: 50%; -webkit-perspective-origin: center -75%; perspective-origin: center -75%;
}
.pyramid__inner { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(-150px) translateX(-70%) rotateY(360deg); transform: translateZ(-150px) translateX(-70%) rotateY(360deg);
-webkit-animation: Anim 15s linear infinite; animation: Anim 15s linear infinite;
}
@-webkit-keyframes Anim { 0% { -webkit-transform: translateZ(-150px) translateX(-75%) rotateY(0deg); transform: translateZ(-150px) translateX(-75%) rotateY(0deg); } 50% { -webkit-transform: translateZ(-150px) translateX(75%) rotateY(180deg); transform: translateZ(-150px) translateX(75%) rotateY(180deg); } 100% { -webkit-transform: translateZ(-150px) translateX(-75%) rotateY(360deg); transform: translateZ(-150px) translateX(-75%) rotateY(360deg); }
}
@keyframes Anim { 0% { -webkit-transform: translateZ(-150px) translateX(-75%) rotateY(0deg); transform: translateZ(-150px) translateX(-75%) rotateY(0deg); } 50% { -webkit-transform: translateZ(-150px) translateX(75%) rotateY(180deg); transform: translateZ(-150px) translateX(75%) rotateY(180deg); } 100% { -webkit-transform: translateZ(-150px) translateX(-75%) rotateY(360deg); transform: translateZ(-150px) translateX(-75%) rotateY(360deg); }
}
.bit { position: absolute; height: 0; border-right: 100px solid transparent; border-left: 100px solid transparent; opacity: .92;
}
.py-1 { /* transform: scale(.485) translateX(4rem) translateY(11.25rem); */ -webkit-transform: scale(.485); transform: scale(.485); -webkit-perspective: 5000px; perspective: 5000px; z-index: 3; top: 0;
}
.py-2 { /* transform: scale(.72) translateX(1.5rem) translateY(1.25rem); */ -webkit-transform: scale(.72); transform: scale(.72); -webkit-perspective: 2900px; perspective: 2900px; z-index: 2; top: 140px;
}
.py-3 { -webkit-transform: scale(1.2); transform: scale(1.2); -webkit-perspective: 1000px; perspective: 1000px; z-index: 1; top: 340px;
}
/* ------------ 1 ------------ */
.py-1 .bit { width: 0px;
}
.py-1 .bit-1 { border-bottom: 200px solid #9d492c;
}
.py-1 .bit-2,
.py-1 .bit-3,
.py-1 .bit-4 { border-bottom: 200px solid #c87154;
}
.py-1 .bit-1 { -webkit-transform: rotateX(30deg) translateZ(57px); transform: rotateX(30deg) translateZ(57px);
}
.py-1 .bit-2 { -webkit-transform: rotateX(-30deg) translateZ(-57px); transform: rotateX(-30deg) translateZ(-57px);
}
.py-1 .bit-3 { -webkit-transform: rotateZ(-30deg) rotateY(-90deg) translateZ(-57px); transform: rotateZ(-30deg) rotateY(-90deg) translateZ(-57px);
}
.py-1 .bit-4 { -webkit-transform: rotateZ(30deg) rotateY(90deg) translateZ(-57px); transform: rotateZ(30deg) rotateY(90deg) translateZ(-57px);
}
/* ------------ 2 ------------ */
.py-2 .bit { width: 140px; border-right: 75px solid transparent; border-left: 75px solid transparent;
}
.py-2 .bit-1{ border-bottom: 150px solid #fe8c1c;
}
.py-2 .bit-2,
.py-2 .bit-3,
.py-2 .bit-4 { border-bottom: 150px solid #ffad3e;
}
.py-2 .bit-1 { -webkit-transform: rotateX(30deg) translateZ(122px); transform: rotateX(30deg) translateZ(122px);
}
.py-2 .bit-2 { -webkit-transform: rotateX(-30deg) translateZ(-122px); transform: rotateX(-30deg) translateZ(-122px);
}
.py-2 .bit-3 { -webkit-transform: rotateZ(-30deg) rotateY(-90deg) translateZ(-122px); transform: rotateZ(-30deg) rotateY(-90deg) translateZ(-122px);
}
.py-2 .bit-4 { -webkit-transform: rotateZ(30deg) rotateY(90deg) translateZ(-122px); transform: rotateZ(30deg) rotateY(90deg) translateZ(-122px);
}
.py-2 .bit-5 { position: absolute; background: #fe8c1c; width: 140px; height: 140px; z-index: 10; -webkit-transform: rotateX(90deg) translateX(75px) translateY(0px) translateZ(121px); transform: rotateX(90deg) translateX(75px) translateY(0px) translateZ(121px);
}
/* ------------ 3 ------------ */
.py-3 .bit { width: 200px; border-right: 75px solid transparent; border-left: 75px solid transparent;
}
.py-3 .bit-1 { border-bottom: 150px solid #00908a;
}
.py-3 .bit-2,
.py-3 .bit-3,
.py-3 .bit-4 { border-bottom: 150px solid #00b3ac;
}
.py-3 .bit-1 { -webkit-transform: rotateX(30deg) translateZ(158px); transform: rotateX(30deg) translateZ(158px);
}
.py-3 .bit-2 { -webkit-transform: rotateX(-30deg) translateZ(-158px); transform: rotateX(-30deg) translateZ(-158px);
}
.py-3 .bit-3 { -webkit-transform: rotateZ(-30deg) rotateY(-90deg) translateZ(-158px); transform: rotateZ(-30deg) rotateY(-90deg) translateZ(-158px);
}
.py-3 .bit-4 { -webkit-transform: rotateZ(30deg) rotateY(90deg) translateZ(-158px); transform: rotateZ(30deg) rotateY(90deg) translateZ(-158px);
}
.py-3 .bit-5 { position: absolute; background: #00908a; width: 200px; height: 200px; z-index: 10; -webkit-transform: rotateX(90deg) translateX(75px) translateY(0px) translateZ(169px); transform: rotateX(90deg) translateX(75px) translateY(0px) translateZ(169px);
}
.py-3 .bit-6 { position: absolute; background: rgba(51, 51, 51, .01); opacity: 1; width: 355px; height: 355px; box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.17), inset 0px 0px 65px rgba(0, 0, 0, 0.17); z-index: 10; -webkit-transform: rotateX(90deg) translateX(0px) translateY(0px) translateZ(107px); transform: rotateX(90deg) translateX(0px) translateY(0px) translateZ(107px);
}
/* Text style */
span { display: block; width: 100%; text-align: center; color: #fff; font-weight: bold; font-family: sans-serif; font-size: 3rem; -webkit-transform: rotateY(180deg) translateY(100%); transform: rotateY(180deg) translateY(100%);
}
.bit-1 span { -webkit-transform: rotateY(0deg) translateY(100%); transform: rotateY(0deg) translateY(100%);
}
.py-1 span { line-height: 5rem; -webkit-transform: rotateY(180deg) translateY(100%) translateX(-2.5rem); transform: rotateY(180deg) translateY(100%) translateX(-2.5rem);
}
.py-1 .bit-1 span { -webkit-transform: rotateY(0deg) translateY(100%) translateX(-.5rem); transform: rotateY(0deg) translateY(100%) translateX(-.5rem);
}

Home Page	Home
Developer	Elena
Username	semenchenko
Uploaded	December 17, 2022
Rating	3
Size	2,681 Kb
Views	22,264

Do you need developer help for Css piramide?

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!

Elena (semenchenko) Script Codes

Name	Size
Animation countdown	3,081 Kb
Zen cube	2,083 Kb
Modal	9,533 Kb
Calc.js	4,200 Kb
CSS hover effect	3,256 Kb
VideoBg	2,592 Kb
SVG circle path	2,031 Kb
Slider CSS Only	8,018 Kb
Walking skeleton only css	9,064 Kb
Fish 2d game only CSS	9,489 Kb

Create amazing love letters 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
Importable Clearfix	Corysimmons	1,411 Kb
BSP Dungeon Generation	Xgundam05	5,326 Kb
Portfolio Page	KaylaMT	1,983 Kb
Boxes	H3l1um	2,563 Kb
P1	Vivi_Lai	1,533 Kb
Popover Example	Seanboom	2,429 Kb
Nice textured background	Hans	2,659 Kb
Sencha Touch 2.3.1 Basic Grid Example	Trozdol	2,770 Kb
Expert Help	SinceSidSlid	4,064 Kb
Twitch Live Channels	Inkblotty	4,956 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!