Item: impossible pentagon
Rating: 3.4
Author: &#x2063;

0 Downloads
23 Views
Tweet
Download Now View Demo

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 ⁣

impossible pentagon

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

Comments

More from ⁣

pure CSS DNA

Live editing text on a canvas

3d eye | pure CSS

element queries concept

You Might Also Like

FreeCodeCamp Camper Leaderboard 2

#Codevember - Dynamic Article Timeline (ES6)

Flexbox - "fixed" withs

mixins

A Pen by alphadec

Performance Budget Builder

A Pen by Irene Lakhno

Responsive Homepage With Animated Intro