Making Card Look Real in 3D Mousemove

[Dr3am3rz]

Hi guys,

 

I have made a greeting card that will flip open when clicked but it looks kind of fake.

 

So I thought of including a 3D Parallax on mousemove but everything looks so flat.

 

How do I make it look like it's real?

 

I have tried on changing the perspective value but there's no effect.

 

Can anyone help me out on this?

 

Thanks in advance guys!

See the Pen amQYEr by Dr3am3rz (@Dr3am3rz) on CodePen

[Gardemarin]

Add to class  card perspective:

.card {

  perspective: 1400px;

}

 

and change from -165 to 165:

 tl.to([$outerBG, $outerBlank], 1, {

    rotationX: 165

  });

 

https://jsfiddle.net/Gardemarin/ntkkjx0g/