A Pen by Rohan Puri

Thumbnail
This awesome code was written by -HAN-, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -HAN- ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Rohan Puri</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  Click on the orangetraingle
<div class="container">
<div class="cone c1">
</div>
<div class="cone c2">
</div>
  </div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*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');
  }
  
};

Comments