A Pen by Eran Shapira

Thumbnail
This awesome code was written by eranshapira, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright eranshapira ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

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

  
</head>

<body>

  <div class="container">
  <div class="parent animate" id="animateParent">
    <div class="child">
      <div>A</div>
    </div>
    <div class="child">
      <div>B</div>
    </div>
    <div class="child">
      <div>C</div>
    </div>
    <div class="child">
      <div>D</div>
    </div>
    <div class="child">
      <div>E</div>
    </div>
    <div class="child">
      <div>F</div>
    </div>
  </div>  
</div>
<div class="buttons">
  <button class="btn-reset" onclick="resetAnimation()">Reset</button>
</div>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/eranshapira/a-pen-by-eran-shapira-ZxzWpb */
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
div.container {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}
div.parent {
  margin: 0 auto;
  width: 720px;
  perspective: 1000px;
}
div.parent > div.child {
  height: 240px;
  width: 240px;
  float: left;
  background: linear-gradient(235deg, #fff, #aaa);
  color: transparent;
  font-size: 128px;
  text-align: center;
  font-family: tahoma;
  position: relative;
}
div.parent > div.child > div {
  perspective: 600px;
  position: absolute;
  padding-top: 18px;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
}
div.parent.animate div.child {
  animation: box-start 2400ms cubic-bezier(0.175, 0.885, 0.32, 1.075) 1;
}
div.container {
  background: #efefef;
}
@keyframes box-start {
  0% {
    transform: translateZ(400px) translateY(300px) rotateX(-80deg);
    opacity: 0.1;
    perspective: 0px;
  }
  100% {
    transform: translateZ(0px) translateY(0px) rotateX(0deg);
    opacity: 1;
    perspective: 1000px;
  }
}
.buttons {
  position: fixed;
  left: 16px;
  top: 16px;
}
.buttons button {
  width: 120px;
  height: 32px;
  background: #567567;
  color: white;
  font-weight: bold;
  outline: none;
  cursor: pointer;
}


/*Downloaded from https://www.codeseek.co/eranshapira/a-pen-by-eran-shapira-ZxzWpb */
function resetAnimation() {
  window.animateParent.classList.remove('animate');
  setTimeout(() => window.animateParent.classList.add('animate'), 300);
}

Comments