Playing around with rotateX and a bit of trig.
The perspective effect can be added to anything; a site where each content block was extruded could look interesting.
A Pen by Riley Shaw on CodePen.
<form> | |
<button>pellentesque</button> | |
<button>habitant</button> | |
<button>morbi</button> | |
<button>tristique</button> | |
<button>senectus</button> | |
<button>et</button> | |
<button>netus</button> | |
<button>et</button> | |
<button>malesuada</button> | |
<button>fames</button> | |
<button>ac</button> | |
<button>turpis</button> | |
<button>egestas</button> | |
<button>vestibulum</button> | |
<button>tortor</button> | |
<button>quam</button> | |
<button>feugiat</button> | |
<button>vitae</button> | |
<button>ultricies</button> | |
<button>eget</button> | |
<button>tempor</button> | |
<button>sit</button> | |
<button>amet</button> | |
<button>ante</button> | |
<button>donec</button> | |
<button>eu</button> | |
<button>libero</button> | |
<button>sit</button> | |
<button>amet</button> | |
<button>quam</button> | |
<button>egestas</button> | |
<button>semper</button> | |
</form> |
//$(function() { | |
var height, normalizer; | |
var perspectify = function() { | |
var scrolltop = $(window).scrollTop(); | |
$('button').each(function() { | |
var position = $(this).offset().top - scrolltop; | |
var rotation = position * normalizer + 20; | |
$(this).css({'-webkit-transform': 'rotateX(' + rotation + 'deg)', | |
'-moz-transform': 'rotateX(' + rotation + 'deg)', | |
'-ms-transform': 'rotateX(' + rotation + 'deg)', | |
'-o-transform': 'rotateX(' + rotation + 'deg)', | |
'transform': 'rotateX(' + rotation + 'deg)' | |
}); | |
$(this).attr('data-top', 25.6 * Math.sin(rotation * Math.PI / 180)); // 64 * 40% = 25.6 | |
}); | |
}; | |
$(window).resize(function() { | |
height = $(this).height() - 64; // button height = 64px | |
normalizer = - 40 / height // max desired degrees = 20 | |
perspectify(); | |
}).resize(); | |
$(window).scroll(function() { | |
perspectify(); | |
}); | |
$('button').hover( | |
function() { | |
$(this).css('top', $(this).attr('data-top') / 4 + 'px'); | |
}, | |
function() { | |
$(this).css('top', 0); | |
} | |
).mousedown( | |
function() { | |
$(this).css('top', $(this).attr('data-top') + 'px'); | |
} | |
).mouseup( | |
function() { | |
$(this).css('top', 0); | |
} | |
); | |
//}); |
@import "compass" | |
* | |
outline: none | |
form | |
text-align: justify | |
width: 480px | |
padding: 0 60px | |
margin: auto | |
z-index: -8 | |
&:after | |
height: 0 | |
width: 100% | |
display: inline-block | |
content: '' | |
button | |
z-index: 100 | |
display: inline-block | |
height: 64px | |
width: 180px | |
margin-bottom: 64px | |
position: relative | |
border: 0 | |
background: black | |
font-size: 18px | |
color: white | |
text-transform: uppercase | |
font-weight: bold | |
letter-spacing: 2px | |
+transform-style | |
+transition(top 500ms, color 500ms) | |
&:before, &:after | |
width: 100% | |
height: 40% | |
left: 0 | |
position: relative | |
+transform-origin(0%, 0%) | |
+rotateX(-90deg) | |
content: '' | |
position: absolute | |
background-color: #fba | |
+transition(height 500ms) | |
&:before | |
top: 0 | |
&:after | |
top: 100% | |
&:hover | |
cursor: pointer | |
&:before, &:after | |
height: 30% | |
&:active | |
color: #08f | |
&:before, &:after | |
height: 0 |