CSS Matrix3D transform on hover

Question

Currently, I'm trying to achieve the same effect as the card elements displayed in the following url: https://moteurdereussites.withgoogle.com/

As you can see, some cards looks like it is 'pushed back' every time we hover it. And the 'pushed back' effect applied on the position where the user hover the element.

How can I achieve this? I have tried to use the rotate3d attribute, but the 'look and feel' is far from the original. Here is my work in Plunker .

Any help would be appreciated. Thank you.

Answer 1

 var matWidth = $(".matrix").width(); var matHeight = $(".matrix").height(); var matHWidth = matWidth / 2; var matHHeight = matHeight / 2; $(".matrix").wrap("<div class='matrix-wrap'></div>").parent().css({ "height": matHeight, "width": matWidth }); $(".matrix-wrap").mousemove(function(e) { $(".matrix").css("-webkit-transform", "rotateX(" + (e.clientY - matHHeight) / matHHeight * -10 + "deg) rotateY(" + (e.clientX - matHWidth) / matHWidth * 20 + "deg)"); }); $(".matrix-wrap").mouseout(function() { $(".matrix").css("-webkit-transform", "rotateX(0) rotateY(0)"); $(".matrix p").css("-webkit-transform", "translateZ(50px)"); }); $(".matrix-wrap").hover(function() { $(".matrix p").css("-webkit-transform", "translateZ(0px)"); }); 

 .matrix { width: 500px; height: 250px; background: #82b8f5; border-radius: 3px; -webkit-transition: all 1s; display: flex; justify-content: space-around; align-content: space-around; perspective: 1000px; } .matrix p { font-family: 'Roboto', sans-serif; font-size: 36px; -webkit-transition: all 1s; -webkit-font-smoothing: antialiased; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> <div class="matrix"> <p>Some text</p> <p>Some more text</p> </div> 

I have tried to give you what you asked for but you need to fine tune according to your requirements.