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.
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.
<section> | |
<div class="door">Click To Open</div> | |
</section> |
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'); | |
} | |
}); |
<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> |
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); | |
} |