hello and welcome to red stapler channel in this tutorial we are going to show
you how to create a 3d infinity effect using only CSS transform and CSS filter
ready let's check it out so first let's start with HTML structure I'm going to
create a container then create a child div and assign a class to it
so for now let's work on the CSS I'm going to set the width and height of the
container to 100%
and set position to relative
flex display - center every child element
next for the frame div I'm going to set the size to 900 pixels to create a
square
then set the position to absolute and border radius to 50 pixels
and 5 pixels light blue solid border
now you should see a round square in the middle of the screen next I'm going to
use the CSS gradients generator tools to generate the background color I will
create linear gradient using dark blue and dark purple
then copy the code to our CSS file and place it in a body element
then I'm going to add box-shadow to element the first set of the shadow I've
used two layers of light blue color one for outside and one for inside
then repeat the code to create another set this time I will use light purple
color with more blur distance
and here's the result
starting to look good next I'm going to add more frames to the container you can
add as many as you like
then in a CSS I'm going to use nth-child selector to select each of them we are
going to add a transform property to rotate them 40 degrees
and then ad translateY and translateZ since this is first child of the
container I will set them to zero also add opacity again since this is a
first child I will set it to one then repeat it code to match the number of
the frame element you add an in HTML
and for each one I will gradually increase the translateY and decrease
to translateZ and opacity this will take some times so I will fast forward
this video
okay let's see the result the reason it's a mess is because we
haven't set the perspective property of the container so the browser try to
render our transform as 2d well let's go back and edit I will add 50 pixel
perspective for this tutorial and also add CSS filter to increase the
brightness and contrast after shadow for aesthetic
looks good you can try changing the prospective amount to to experiment
different viewing angle
now the final step is to add the animation first create a keyframe
animation then change the brightness and contrast
a little bit
and add animation property to all frame elements
an important step is to add the animation delay to each of them and gradually
increase the delay again this takes sometimes so let's fast forward
now for the zooming effect I will add an animation to change the perspective
amount of the container
and that's all for this tutorial hope you guys enjoy if you want to see more web
development tips and tutorials subscribe this channel to stay tuned for weekly
update thanks for watching see you next time bye