How to create an animated 3d cube hover effect using just CSS transform effect?
To create a wrapper div which define the size and position of the cube inside let’s create a cube div with another two divs inside for the top and front cover so that's it for the HTML part. Let's work on the CSS let's define width height and position of our cube. I'm setting top and left to 50% and position to absolute to make the cube stays on the centre. I'm also going to add a box shadow to create a 3D look you can use any online CSS shadow generator to help with your setting now you see that the top left of the cube is, on the centre which is technically correct since it's the position reference point.
So I'm going to add a minus 50% transform to offset that and really Centre the cue ,now I'm going to set width and height of all divs except the wrapper to 100% and also assign an image background to the front and top of the cube the top and the front divs will look like this for now. Next I'm going to set the top and left properties of each div to zero and move it backward using transform and then rotate the top side of the cube for 90 degrees. We need to set the transform origin to bottom as we want to use the bottom as a rotation point now we don't see the topside anymore since it has been rotated and finally add hover effect to the wrapper to rotate the cube counter clockwise by 90 degrees and set the transform style to preserve 3d and transition time for a half second ease in .Our for all divs it's important to also move the cube back by 50% when rotating or it will look like this .