<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>impossible pentagon</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="view">
<div class="cube">
<div class="axis">
<div class="scaler">
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
</div>
</div>
</div>
<div class="cube">
<div class="axis">
<div class="scaler">
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
</div>
</div>
</div>
<div class="cube">
<div class="axis">
<div class="scaler">
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
</div>
</div>
</div>
<div class="cube">
<div class="axis">
<div class="scaler">
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
</div>
</div>
</div>
<div class="cube">
<div class="axis">
<div class="scaler">
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
</div>
</div>
</div>
</div>
</body>
</html>
/*Downloaded from https://www.codeseek.co/pixelass/impossible-pentagon-jqRzoG */
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #212121;
}
.view {
height: 400px;
width: 400px;
position: relative;
-webkit-transform: rotate(19deg);
transform: rotate(19deg);
}
.view * {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.axis {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transform: rotate(-38deg) rotateX(-23.5deg) rotateY(-45deg);
transform: rotate(-38deg) rotateX(-23.5deg) rotateY(-45deg);
}
.cube {
position: absolute;
top: 50%;
left: 50%;
height: 60px;
width: 60px;
margin: -30px;
}
.cube:nth-child(1) {
-webkit-transform: rotate(0deg) translateY(102px);
transform: rotate(0deg) translateY(102px);
}
.cube:nth-child(2) {
-webkit-transform: rotate(72deg) translateY(102px);
transform: rotate(72deg) translateY(102px);
}
.cube:nth-child(3) {
-webkit-transform: rotate(144deg) translateY(102px);
transform: rotate(144deg) translateY(102px);
}
.cube:nth-child(4) {
-webkit-transform: rotate(216deg) translateY(102px);
transform: rotate(216deg) translateY(102px);
}
.cube:nth-child(5) {
-webkit-transform: rotate(288deg) translateY(102px);
transform: rotate(288deg) translateY(102px);
}
.scaler {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transform-origin: 50% 0 0;
transform-origin: 50% 0 0;
-webkit-transform: scaleX(6.3);
transform: scaleX(6.3);
}
.face {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #def;
}
.face:nth-child(1) {
background-image: linear-gradient(to right, #aabbcc 50%, rgba(170, 187, 204, 0));
background-image: linear-gradient(46deg, #aabbcc 49%, rgba(170, 187, 204, 0) 49%);
-webkit-transform: translateZ(30px) rotateY(90deg) rotateX(0) translateZ(30px);
transform: translateZ(30px) rotateY(90deg) rotateX(0) translateZ(30px);
-webkit-transform: translateZ(8.5714285714px) rotateY(88.5deg) translateZ(25.2px) scaleX(1.65) skewX(-2.2deg);
transform: translateZ(8.5714285714px) rotateY(88.5deg) translateZ(25.2px) scaleX(1.65) skewX(-2.2deg);
}
.face:nth-child(2) {
background-image: linear-gradient(to right, rgba(170, 187, 204, 0) 50%, #aabbcc);
-webkit-transform: translateZ(30px) rotateY(180deg) rotateX(0) translateZ(30px);
transform: translateZ(30px) rotateY(180deg) rotateX(0) translateZ(30px);
-webkit-transform: translateZ(30px) rotateY(180deg) translateZ(30px) translateX(-16.5%) scaleX(0.44) skewX(1.5deg);
transform: translateZ(30px) rotateY(180deg) translateZ(30px) translateX(-16.5%) scaleX(0.44) skewX(1.5deg);
}
.face:nth-child(3) {
visibility: hidden;
background-image: linear-gradient(to right, rgba(170, 187, 204, 0) 50%, rgba(170, 187, 204, 0));
-webkit-transform: translateZ(30px) rotateY(270deg) rotateX(0) translateZ(30px);
transform: translateZ(30px) rotateY(270deg) rotateX(0) translateZ(30px);
}
.face:nth-child(4) {
visibility: hidden;
background-image: linear-gradient(to right, #aabbcc 50%, #aabbcc);
-webkit-transform: translateZ(30px) rotateY(0) rotateX(-90deg) translateZ(30px);
transform: translateZ(30px) rotateY(0) rotateX(-90deg) translateZ(30px);
}
.face:nth-child(5) {
background-image: linear-gradient(to right, rgba(170, 187, 204, 0) 50%, #aabbcc);
background-image: linear-gradient(to right, rgba(170, 187, 204, 0) 45%, #aabbcc);
-webkit-transform: translateZ(30px) rotateY(0) rotateX(0deg) translateZ(30px);
transform: translateZ(30px) rotateY(0) rotateX(0deg) translateZ(30px);
-webkit-transform: scaleX(0.42) translateX(45.7%) translateZ(30px) rotateY(0) rotateX(0deg) translateZ(30px) skewX(-1.5deg);
transform: scaleX(0.42) translateX(45.7%) translateZ(30px) rotateY(0) rotateX(0deg) translateZ(30px) skewX(-1.5deg);
}
.face:nth-child(6) {
background-image: linear-gradient(to right, rgba(170, 187, 204, 0) 50%, rgba(170, 187, 204, 0));
-webkit-transform: translateZ(30px) rotateY(0) rotateX(90deg) translateZ(30px);
transform: translateZ(30px) rotateY(0) rotateX(90deg) translateZ(30px);
-webkit-transform: scaleX(0.27) translateX(160%) translateZ(30px) rotateY(0) rotateX(90deg) translateZ(30px);
transform: scaleX(0.27) translateX(160%) translateZ(30px) rotateY(0) rotateX(90deg) translateZ(30px);
}