'Button inside a rotating polygon clip

So I have a rotating pyramid which has text and a button on each face, but the buttons are unresponsive due to overlapping divs. Is there any way to make the buttons clickable in the rotating pyramid ? -sorry for the ugly code, it's only a prototype.

body {
  padding-top: 230px;
}

.tetra {
  position: relative;
  transform-origin: 50% 56%;
  width: 700px;
  padding-bottom: 606.21px;
  /* height of equilateral triangle = sin60° * width */
  margin: 0 auto;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.tetra div {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  transform-style: preserve-3d;
  -webkit-clip-path: polygon(50% 0, 100% 100%, 0% 100%);
  clip-path: polygon(50% 0, 100% 100%, 0% 100%);
}


/* Rotation of –109.5° is angle(C, M[AB], D), per http://www.f-lohmueller.de/pov_tut/geo/geom_200e.htm, 180° – atan(2 * sqrt(2)) ≈ 109.5° */

.tetra .face2 {
  transform-origin: 0% 100%;
  transform: rotate(-60deg) rotatex(-109.5deg);
  background: rgb(190, 0, 0);
}

.tetra .face3 {
  transform-origin: 100% 100%;
  transform: rotate(60deg) rotatex(-109.5deg);
  background-color:blue;
}

.tetra .face4 {
  transform-origin: 50% 100%;
  transform: rotate(180deg) rotatex(-109.5deg);
  background: rgb(76, 190, 0);
}

.tetra .face4 p {
  transform: scale(-1, 1);
  top: 60%;
  left: 50%;
  text-align: center;
  width: 93px;
  margin: 0px;
  position: relative;
  font-size: 30px;
  position: relative;
  font-weight: bold;
}

.tetra .face2 p {
  transform: scale(-1, 1);
  font-size: 30px;
  text-align: center;
  top: 60%;
  left: 50%;
  position: relative;
  width: 93px;
  margin: 0px;
  font-weight: bold;
}

.tetra .face3 p {
  transform: scale(-1, 1);
  font-size: 30px;
  text-align: center;
  top: 60%;
  left: 45%;
  position: relative;
  width: 40%;
  font-weight: bold;
}

@keyframes rotate {
  0% {
    transform: rotatex(90deg) rotateY(0deg) rotatez(0deg);
  }
  100% {
    transform: rotatex(90deg) rotateY(0deg) rotatez(360deg);
  }
}

<html>

<head>
  <link rel="stylesheet" href="pyramid.css">
</head>
<div style="height:100px;" onmousedown="spin()">
  <div class="tetra">
    <div class="face1"></div>
    <div class="face2">
      <p>TEXTFACE2<button onclick="window.Open(cube.html)">buttonface2</button></p>
    </div>
    <div class="face4">
      <p>TEXTFACE3<button onclick="window.Open(cube.html)">buttonface4</button></p>
    </div>
    <div class="face3" "><p>TEXTFACE3<button onclick="window.Open(cube.html) "">buttonface3</button>
      </p>
    </div>
  </div>
</div>
<script>
  let rotation = 0;

  function spin() {
    const collection = document.getElementsByClassName("tetra");
    collection[0].style.transform = "rotatex(90deg) rotateY(0deg) rotateZ(" + rotation + "deg)";
    rotation = rotation + 120;
  }
</script>
<style>
  .tetra {
    transform: rotatex(90deg) rotateY(0deg) rotatez(0deg);
  }
  

</style>

</html>

html css

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Button inside a rotating polygon clip

Sources

Related Questions