Penrose Triangle CSS

Developer
François Chazal
Size
3,283 Kb
Views
40,480
  1. Penrose Triangle CSS Previews
  2. Penrose Triangle CSS HTML Codes
  3. Penrose Triangle CSS CSS Codes

How do I make an penrose triangle css?

Full CSS penrose triangle. What is a penrose triangle css? How do you make a penrose triangle css? This script and codes were developed by François Chazal on 21 September 2022, Wednesday.

Penrose Triangle CSS Previews
IQ Test

Penrose Triangle CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Penrose Triangle CSS</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! */ body { overflow: hidden; background-color: #fff;
}
section { position: absolute; top: 50%; left: 50%; width: 240px; height: 277.12813px; margin-top: -120px; margin-left: -130px;
}
@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
}
.penrose { position: absolute; width: 240px; height: 277.12813px; box-sizing: content-box; transform-origin: 50% 66.666666%;
}
@keyframes move { 0% { transform-origin: 50% 50%; } 40% { transform-origin: 50% 66.666666%; } 60% { transform-origin: 50% 66.666666%; } 100% { transform-origin: 50% 50%; }
}
.penrose > div { position: absolute; bottom: 0;
}
.penrose > div:nth-of-type(1) { width: 160px; height: 34.64102px; transform-origin: 0% 100%; transform: translateX(40px) rotate(-60deg) skewX(-30deg);
}
.penrose > div:nth-of-type(2) { width: 240px; height: 34.64102px; background: rgba(0, 255, 0, 0.5); transform-origin: 100% 100%; transform: translate(0) skewX(-30deg);
}
/*************************************/
.penrose:nth-child(1) { transform: rotateZ(0deg);
}
.penrose:nth-child(1) > div { animation: color1 15s ease infinite;
}
@keyframes color1 { 0% { background: white; } 50% { background: #d65c5c; } 100% { background: white; }
}
.penrose:nth-child(2) { transform: rotateZ(120deg);
}
.penrose:nth-child(2) > div { animation: color2 15s ease infinite;
}
@keyframes color2 { 0% { background: white; } 50% { background: #a32929; } 100% { background: white; }
}
.penrose:nth-child(3) { transform: rotateZ(240deg);
}
.penrose:nth-child(3) > div { animation: color3 15s ease infinite;
}
@keyframes color3 { 0% { background: white; } 50% { background: #ebadad; } 100% { background: white; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <section> <div class="penrose"> <div></div> <div></div> </div> <div class="penrose"> <div></div> <div></div> </div> <div class="penrose"> <div></div> <div></div> </div>
</section>
</body>
</html>

Penrose Triangle CSS - Script Codes CSS Codes

body { overflow: hidden; background-color: #fff;
}
section { position: absolute; top: 50%; left: 50%; width: 240px; height: 277.12813px; margin-top: -120px; margin-left: -130px;
}
@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
}
.penrose { position: absolute; width: 240px; height: 277.12813px; box-sizing: content-box; transform-origin: 50% 66.666666%;
}
@keyframes move { 0% { transform-origin: 50% 50%; } 40% { transform-origin: 50% 66.666666%; } 60% { transform-origin: 50% 66.666666%; } 100% { transform-origin: 50% 50%; }
}
.penrose > div { position: absolute; bottom: 0;
}
.penrose > div:nth-of-type(1) { width: 160px; height: 34.64102px; transform-origin: 0% 100%; transform: translateX(40px) rotate(-60deg) skewX(-30deg);
}
.penrose > div:nth-of-type(2) { width: 240px; height: 34.64102px; background: rgba(0, 255, 0, 0.5); transform-origin: 100% 100%; transform: translate(0) skewX(-30deg);
}
/*************************************/
.penrose:nth-child(1) { transform: rotateZ(0deg);
}
.penrose:nth-child(1) > div { animation: color1 15s ease infinite;
}
@keyframes color1 { 0% { background: white; } 50% { background: #d65c5c; } 100% { background: white; }
}
.penrose:nth-child(2) { transform: rotateZ(120deg);
}
.penrose:nth-child(2) > div { animation: color2 15s ease infinite;
}
@keyframes color2 { 0% { background: white; } 50% { background: #a32929; } 100% { background: white; }
}
.penrose:nth-child(3) { transform: rotateZ(240deg);
}
.penrose:nth-child(3) > div { animation: color3 15s ease infinite;
}
@keyframes color3 { 0% { background: white; } 50% { background: #ebadad; } 100% { background: white; }
}
Penrose Triangle CSS - Script Codes
Penrose Triangle CSS - Script Codes
Home Page Home
Developer François Chazal
Username fchazal
Uploaded September 21, 2022
Rating 3
Size 3,283 Kb
Views 40,480
Do you need developer help for Penrose Triangle CSS?

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!

François Chazal (fchazal) Script Codes
Name
Hexagona
Ribbon Animated Effect
The Cube
Parallax Scrolling
HExa
Logo
Folding Panel
WebTechs Animated Logo
World
Obama
Create amazing art & images 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!