A Pen by Rohan Puri

/*Downloaded from https://www.codeseek.co/-HAN-/a-pen-by-rohan-puri-YPxZde */
.body{
  perspective:600px;
}

.cone {
    
    border-style: solid;
    border-width: 0 40px 68px;
    height: 0;
    width: 0;
    position:absolute;
  left:100px;
  top:100px;
}
.c1{
  border-color: transparent transparent #38485F;
}

.c2 {
    border-color: transparent transparent orange;
    transform-origin: 75% 50% 0;
    transform-style: preserve-3d;

}

.open {
    
  animation: turn 0.3s ease-out forwards;
  
}

@keyframes turn{
  0%{
    transform: rotateX(0) rotateY(0) rotateZ(0);
  }
  25%{
    transform: rotateZ(-12deg) rotateX(36deg) rotateY(51deg);
  }
  50%{
    transform: rotateZ(-32deg) rotateX(32deg) rotateY(94deg);
  }
  75%{
    transform: rotateZ(-54deg) rotateX(19deg) rotateY(139deg);
  }
  100%{
    transform: rotateZ(-61deg) rotateX(0deg) rotateY(180deg);
  }
}

/*Downloaded from https://www.codeseek.co/-HAN-/a-pen-by-rohan-puri-YPxZde */
window.onload = function(){
  //alert('clicked');
  var cone = document.getElementsByClassName('cone');
  
  cone[1].addEventListener('click',flip) ;
  
  function flip(){
//    alert('clicked');
    var ele = document.getElementsByClassName('c2');
    ele[0].classList.toggle('open');
  }
  
};