A Pen by Dmitriy Muratov

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

Technologies

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

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

  
</head>

<body>

  <div class="item">
  <div class="item__front">
    Front
  </div>
  <div class="item__back">
    Back
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/dmitriy_muratov/a-pen-by-dmitriy-muratov-BYazOv */
.item {
    color: #ffffff;  
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: stretch;
    height: 480px;
    width: 400px;
    margin: 0 auto;
    position: relative;
  
    transition: all .8s ease 0s;
}
.item__front, 
.item__back {
    backface-visibility: hidden;
    box-sizing: border-box;
    min-height: 320px;
    height: 100%;
    width: 100%;
    padding: 15px;
}
.item__front {  
    background: #0277bd;
    display: flex;
    flex-flow: column nowrap;
    justify-content: stretch;
  
    z-index: 2;
}
.item__back {
    background: #7b1fa2;
    display: flex;
    flex-flow: column nowrap;
  
    position: absolute;
    top: 0;
    left: 0;
}

/*Downloaded from https://www.codeseek.co/dmitriy_muratov/a-pen-by-dmitriy-muratov-BYazOv */
TweenMax.set($(".item__front"), {
                transformStyle:"preserve-3d",
                rotationX: 90, onComplete: function (a) {
                }
            });
            TweenMax.set($(".item__back"), {
                transformStyle:"preserve-3d",
                rotationX: 0, onComplete: function (a) {
                }
            });

Comments