Pure CSS Morphing Animation With Clip Path & 3D Cube Menu With Perspective & Preserve 3D Properties


Hi everyone. In this video I will show
you how to create pure CSS morphing effect with clip path and 3d menu with
perspective and preserve 3d CSS properties. We will draw a seahorse with
clip path and it will be point in its tail to the currently selected menu item
we will use a relatively unknown adjacent sibling selector so whenever we
hover a button we can also animate the seahorse. I have made a similar video with
animated fox before but some people asked me to give commentary and explain
how the code works so here we go also don’t forget to like the video if you
liked it subscribe to the channel and click the bell icon to get notified when
I release a new video in index.html we link style CSS file and
create a div with a class of container inside we create three children divs
all three will have a shared class I called side and I will separate them
with additional classes side-front side left and side-top inside side-front div
we will create four buttons with paragraph tag inside for home about
contact and shop and finally we create another div with a class of shape later
we will use clip path to cut out a seahorse out of it in style CSS we
declare basic reset rules so we don’t get any unexpected sizing issues in
different browsers we set container width and height to 200 pixels and
perspective to 700 pixels perspective property defines how far away the object
is from the user the smaller the number the more pronounced and warped 3d effect
you will get now we will basically build a 3d cube we
will need only three sides as that’s all we can see we have our div with a class
of box we set its width and height to hundred percent of its parent transform
style preserve 3d indicates that its children will be set in 3d space
normally if we rotate an element it will stay in front of elements behind it at
all times but with reserved 3d property these elements will clip
through each other if they’re 3d spaces intersect we will use transform property
and rotate the element minus 20 degrees around the x-axis and plus 30 degrees
around the y-axis I am giving it blue background just to show you what’s
happening this element will have no color inside we have three sibling
elements with a class of sight first we will set styles for all three of them
position:absolute with an height of 200 pixels and a background color side front
element will have transform translate Z 100 pixels which will bring it closer
to the viewer along the z-axis in a 3d space then we rotate side left – 90 degrees
along the y axis and translate set 100 pixels and the with side top we rotate X
90 degrees and translate the 800 pixels notice I also use the trick where we
give each side slightly different shade of the same color to create illusion of
3d shadow if you want to see another way to create and use a 3d cube for your
website check out this video we use html5 button tag which comes with all
the predefined CSS styles first I will reset everything to plain text then I
will give it with 100% font family impact size 40 pixels transition 0.5
seconds text-align:left and padding left 20 pixels when we hover the button we will
increase its padding-left to 210 pixels now we style the div with a class of shape
we created earlier first we give it width and height of 400 pixels and
position it slightly to the left of the cube also we give it black background
color then we go to this website to create a custom clip path default clip
path has only three points or four points so we delete it and use this
polygonal lasso tool to create our custom one the way it works is you
create your own shape and once you close that shape you will scroll down and see
clip path CSS code it will also generate as we SVG but we will not be using that
in this video I’m not gonna show you the entire process of me drawing the
seahorse here I will include the link for the website and the code for the
seahorse in the description down below I will also include a cold pan with a
complete project so you can play with it if you want we copy the clip path values
and paste it onto our shape element since this element is a sibling of
button element we can use adjacent sibling selector little squiggly line to
change its CSS whenever we hover on the button this is how we create hover
effects on siblings we go back to the website slightly
change the clip path while making sure the new shape has the same amount of
points and the paths don’t cross too much as we want to avoid glitches and we
want to create an illusion of movement before we do that we can also create a
simple keyframes effect where we animate the seahorse up and down along the y
axis and rotate it slightly we add animation I called float it will loop
every 10 seconds infinitely now our seahorse is slowly floating up and down so finally we just paste the custom clip
paths I created earlier and we’re done while you’re here you can also check out
my other clip path videos for example do you know how to create a menu like
this thank you very much for watching don’t forget to like the video if you
liked it subscribe to the channel and click the bell icon so you can notified
when I release a new video

Add a Comment

Your email address will not be published. Required fields are marked *