<!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');
}
};
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
jQuery
v2.1.3
