hello and welcome to red stapler Channel in this video I'm going to show you how
to create an animated 3d cube hover effect using just CSS transform effect
right from scratch in just a few minutes ready let's check it out first let's
start with our cube structure I'm going to create a wrapper div which define
the size and position of the cube inside I will 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 center 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 center 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 Center 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
counterclockwise by 90 degrees
and set the transform style to preserve 3d
and transition time for a half second ease in and our for all divs
it's important to also move the cube back by 50% when rotating or it will look like this
so that's all for this tutorial you can find a link to the code in a video
description box below hope you guys enjoyed this video and please like or
subscribe if you want to stay tuned with us thanks for watching and see you in
the next video bye