impossible pentagon

In this example below you will see how to do a impossible pentagon with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ⁣, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ⁣ ©
  • HTML
  • CSS
<!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);
}

Comments

More from ⁣

pure CSS DNA

pure CSS DNA

By pixelass
Live editing text on a canvas

Live editing text on a canvas

By pixelass
3d eye |&#xA0;pure CSS

3d eye | pure CSS

By pixelass
element queries concept

element queries concept

By ⁣

You Might Also Like

karaokend

karaokend

By anareyna
Portfolio - FreeCodeCamp

Portfolio - FreeCodeCamp

By katarzynaadr
Automatic helper classes with SASS maps

Automatic helper classes with SASS maps

By fxm90
A Pen by Zachary Woodley

A Pen by Zachary Woodley

By zwoodley128
Replace every &quot;o&quot; with an &quot;a&quot;

Replace every "o" with an "a"

By Felix De Montis
GSAP Pixi Plugin

GSAP Pixi Plugin

By osublake
codepen&#x7B2C;&#x4E00;&#x7DB2;&#x9801;

codepen第一網頁

By a40311019
feelin&apos;-griddy2

feelin'-griddy2

By gingeryale
© 2018 - Copyright CodeSeek.co
contact email