How to change elements perspective based on mouse position
This isn't something I'm super familiar with, but looking through the page's source files, it looks like this is the relevant javascript for that functionality:
bpc.galleryThumbInteraction = function() {
if (bpc.clickType !== 'tap') {
TweenMax.set($('.project-list .project'), {rotationY: 0, rotationX: 0, rotationZ: 0, transformPerspective: 1000});
$('.project-list .project').mouseover(function() {
$('.project-list .project').mousemove(function(e) {
var x = e.pageX - $(this).offset().left,
y = e.pageY - $(this).offset().top;
var px = x/$(this).width(), py = y/$(this).height();
var xx = -10 + (20*px), yy = 10 - (20*py);
//TweenMax.killTweensOf($(this));
TweenMax.to($(this), 0.5, {rotationY: xx, rotationX: yy, rotationZ: 0, transformPerspective: 1000, ease: Quad.easeOut});
});
}).mouseout(function() {
$(this).unbind('mousemove');
//TweenMax.killTweensOf($(this));
TweenMax.to($(this), 0.5, {rotationY: 0, rotationX: 0, rotationZ: 0, transformPerspective: 1000, ease: Quad.easeOut});
});
}
};Remember you can often view a pages source files by opening Chrome Dev Tools --> Source Tab --> look for the file you're looking for (in this case, pixi.js)
Also be aware that they are using the matrix3d() css function, which is a bit different than what you have..