CSS Open Door Effect.markdown

CSS Open Door Effect

Using 3D transforms create an open door effect. Click the door to open and win a prize.

A Pen by Juan Moises Torrijos on CodePen.

License.

index.html

<section>
  <div class="door">Click To Open</div>
</section>

script.js

var $box = $('.box'),
		$section = $('section'),
		lpixels = ["abstract", "animals", "business", "cats", "city", "food", "nightlife", "fashion", "people", "nature", "sports", "technics", "transport"];
var _random = _.random(0, lpixels.length);
$section.css({
  'background-image': 'url(http://lorempixel.com/300/600/' + lpixels[_random] + ')'
});
$section.css({
      'background-image':'url(http://lorempixel.com/300/600/' + lpixels[_random] + ')'
    });

$box.on('click', function(){
  var $this = $(this);
  if ($this.hasClass('open')) {
    $this.removeClass('open');
  }
  else {
	  $this.addClass('open');
  }
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"></script>

style.css

body {
  background: #999999;
}

section {
  width: 300px;
  height: 600px;
  border: 3px solid #B3B3B3;
  color: #cccccc;
  background: center top no-repeat rgba(212, 212, 212, 0.8);
  margin: 30px auto;
  transform-style: preserve-3d;
  perspective: 2000px;
}

.door {
  width: 100%;
  height: 100%;
  background: #804000;
  color: #B3B3B3; 
  text-transform: uppercase;
  font-size: 1.8em;
  line-height: 300px;
  text-align: center;
  cursor: pointer;
  transition: transform 1.5s;
  transform-origin: 0% 50%;
}

.open {
  transform: rotateY(-80deg);
}