Open door

by Luong Dung

HTML

<div class="home">
  <div class="door">
    <div class="fold left active">

    </div>
    <div class="fold right">

    </div>
  </div>
  
  
  
  
  <div class="in-door">
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

.door {
  position: relative;
  height: 300px;
  width: 400px;

  z-index:0;
  overflow: auto;
  margin-top: 10px;
      -moz-perspective: 600px;
        perspective: 600px;
}

.fold {
  width: 200px;
  position: absolute;
  top: 0;
  bottom: 0;
  cursor: pointer;
}

.left.active {
  background: #eef00d;
  left: 0;
  top: 0;
  z-index: 999;
   transition: all ease 1s;
    transform: rotateY(0deg);
      transform-origin: 0 100px;
    
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
}
.door:hover .left.active{
  transform: rotateY(180deg);

}

JavaScript

/*
jQuery.fn.rotate = function(degrees) {
    $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
                 '-moz-transform' : 'rotate('+ degrees +'deg)',
                 '-ms-transform' : 'rotate('+ degrees +'deg)',
                 'transform' : 'rotate('+ degrees +'deg)'});
    return $(this);
};
*/

$(function() {
  $('.left').click(function() {
    $(this).css({   });
  });

  $('.right').click(function() {
    $(this).css({   });
  });
});