Crazy 3D Rotation Effect Using CSS Only
Summary
TLDRThis tutorial video demonstrates how to create a 3D rotating soda bottle effect using only CSS. The presenter guides viewers through the process of selecting an image, manipulating it with CSS properties like 'aspect ratio', 'background blend mode', and 'mask image', to achieve a realistic soda mockup. The video also covers creating hover effects for rotation and layering soda bottles to transform one into another, showcasing advanced CSS techniques for web design.
Takeaways
- đš The video demonstrates creating a 3D rotating soda effect using only CSS.
- đŒïž It begins by selecting a suitable soda mockup image from a free image source.
- âïž The selected image is edited to remove the background and cropped to fit the design.
- đ The HTML structure includes a 'banner' class containing 'product' classes for each soda image.
- đš CSS is used to style the banner, set the height, and manage overflow and positioning.
- đ The 'soda' class utilizes the mockup image with specific width and height settings and an aspect ratio for responsiveness.
- đŒïž The 'background-blend-mode' property with 'multiply' value is used to blend the product cover image with the mockup.
- đ The 'mask-image' property is introduced to crop the content of an element according to the shape of the inserted image.
- đ A hover effect is created on the product to make the soda appear as if it's rotating by changing the 'background-position'.
- đ§ CSS variables are used in HTML to store image paths, simplifying the process of creating multiple soda bottles.
- đ The design includes additional decorative elements like 'rock' images positioned absolutely within the banner.
- đ Interactive hover effects are applied to the decorative elements to move them when the user hovers over the product.
Q & A
What is the main topic of the video?
-The video demonstrates how to create a 3D rotating soda effect using only CSS, without the need for JavaScript.
What are the primary elements needed to create the soda bottle effect?
-The primary elements are the soda bottle image and its cover photo, which are manipulated using CSS properties.
Why is the aspect-ratio property important in this tutorial?
-The aspect-ratio property ensures that the height of the soda bottle image automatically adjusts based on its width, which is crucial for maintaining proper proportions when the design is responsive.
How does the background-blend-mode property contribute to the effect?
-The background-blend-mode property with the 'multiply' value is used to merge the cover image with the soda mockup image, making it appear as though the cover is pasted onto the soda bottle.
What is the purpose of the mask-image property in this context?
-The mask-image property is used to crop the soda bottle image to fit within the boundaries of the mockup, ensuring that only the desired parts of the image are visible.
How is the rotation effect of the soda bottle achieved using CSS?
-The rotation effect is created by changing the left position of the background image within the element using the CSS transition property. This simulates the appearance of the soda bottle rotating.
Why does the author recommend against manually adjusting the height value of the soda image?
-Manually adjusting the height value can cause issues when the design is responsive. Instead, using the aspect-ratio property ensures that the image's height adjusts automatically based on its width.
What additional decorations are added to the banner, and how are they positioned?
-The banner includes decorative rock images, which are positioned using the position absolute property and the inset zero shorthand, making them the same size as the banner and overlaying it.
How does the video ensure that the second soda bottle appears only when the user hovers over the product?
-The second soda bottle is initially hidden using CSS. When the user hovers over the product, the second soda bottle is shown, creating the effect of the soda rotating and turning into another bottle.
What CSS properties are highlighted as being new or less commonly known in this video?
-The video highlights the aspect-ratio, background-blend-mode, and mask-image properties as newer or less commonly known CSS features that are useful for creating advanced visual effects.
Outlines
đ§Ș Creating a 3D Rotating Soda Effect with CSS
In this paragraph, the speaker introduces a video tutorial about creating a 3D rotating soda bottle effect using only CSS. They mention that a viewer asked if the effect could be done without JavaScript, and they confirm it can. The speaker explains that the tutorial will guide the audience through making the soda bottle rotate and transition into another using CSS. They also emphasize the importance of subscribing to the channel for more programming and web design content. The process begins by selecting a suitable soda bottle image from Freepik, editing it to remove the background, and then implementing the effect with HTML and CSS.
đš Designing and Animating Multiple Soda Bottles with CSS
This paragraph delves into the next steps of the tutorial, where the speaker explains how to create and animate multiple soda bottles using CSS. Instead of hardcoding the image directly into the CSS, they suggest using a variable in HTML to manage the image path, allowing for easier updates and multiple products. The speaker continues by explaining how to align and overlap the soda bottles using CSS Flexbox and absolute positioning. Additional decorative elements, such as rocks, are also added to the design. Finally, they discuss how to create the illusion of one soda bottle transforming into another using hover effects, new CSS properties like aspect-ratio, background-blend-mode, and mask-image. The paragraph concludes with a reminder to like and subscribe for more content.
Mindmap
Keywords
đĄ3D Slider
đĄCSS
đĄSoda Bottle
đĄRotating Effect
đĄBackground Image
đĄAspect Ratio
đĄBackground Blend Mode
đĄMask Image
đĄHover Effect
đĄResponsive Design
đĄVariable
Highlights
Creating a 3D slider with a rotating soda effect using only CSS is possible.
The video demonstrates how to create the soda bottle rotation effect with CSS.
A soda bottle consists of two main parts: the bottle and its cover.
Using a suitable image for the soda mockup from a free resource.
Editing the image to remove the background and crop excess space.
Downloading the image in PNG format for CSS manipulation.
Setting up the HTML structure with classes for the banner and products.
CSS styling includes positioning, sizing, and hiding overflow for the banner.
Using CSS variables for the soda mockup image to ensure visibility and responsiveness.
The importance of maintaining aspect ratio for responsive design.
Implementing the 'background-blend-mode' property to merge images.
Utilizing 'mask-image' to crop content to the shape of the mockup.
Creating a hover effect to rotate the soda bottle using CSS transitions.
Using CSS variables to dynamically change images for different soda products.
Styling additional elements like decorative rocks with absolute positioning.
Creating interactive hover effects for decorative elements to enhance visual appeal.
Hiding and showing soda bottles on hover to create a rotation effect.
Introduction of new CSS properties like 'aspect-ratio', 'background-blend-mode', and 'mask-image'.
The video aims to be useful for learning advanced CSS techniques for web design.
Transcripts
recently some of you have watched my old
video on the topic of creating a 3D
slider with a rotating soda effect using
JavaScript he left a comment is it
possible to create it with CSS only
really but we
can in this video I will show you how to
create the effect of a soda bottle
rotating and turning into another soda
bottle using only CSS because you know I
won't turn any questions it's just that
I need some time to create a video to
answer those questions if you find it
interesting don't forget to like And
subscribe to the channel to continuously
update new interesting videos about
programming and web design thank you
very much everyone and now let's get
started a bottle of soda is made from
two ingredients the bottle and its cover
photo for the cover photo you can use
any photo but with martial arts we need
to find a suitable image first I will go
to free pick here you just need to enter
the keyword soda mockup there will be
many results for you please choose the
appropriate image here click to select
remove
background then click on edit select
crop feature cut out all excess space on
the
photo once completed we just need to
download this image in PNG format after
we have the image we will now proceed
with the code in HTML I create a banner
class in the banner I have a product
class to contain products each soda
class will represent a product image in
CSS the banner will have a height equal
to the height of the device screen with
overflow hidden elements that fall out
of the frame will be removed use
position to position it for the product
I will give the background a red color
to help us see it more easily also
declare width and height use position to
easily move positions 170 pixels from
bottom combine left and translate text
to center it with c Index to ensure it
is not overlapping by another element
the transition attribute is used to
specify the time to create the effect
when the user hovers next is the focus
of this article the soda class this
class will use a background that is the
soda mockup image that we searched for
at the beginning of the video note that
I only decare the background not the
background image this background will
have a size equal to 100% of the
element's height width 280 pixels with
this type of image we need to have width
and height to ensure the mockup image is
visible enough many people will try to
change the value of height to find the
right size I advise you not to do so
because when we're sponsive the width
value changes you will once again find a
different height value instead use
aspect ratio and find an appropriate
ratio between width and height at this
point the system will rely on the ratio
declared in aspect ratio to find the
height value for you that means when
implementing responsiveness you don't
need to waste time finding the height
value anymore after completing the
mockup creation step I continue to
insert an image the product cover image
in front of the mockup image it looks
really fake do not worry in CSS we have
a background blend mode property with
the value multiply the mockup image will
merge with the mockup image this makes
it feel like this cover image is
actually pasted onto the mockup image
but not enough we will need to erase the
areas where the image is outside the
mockup don't worry because we have a new
property from CSS which is mask image
when we insert any PNG image into the
mask image then all content inside the
element will be cropped according to the
shape of the inserted image for example
here I am inserting a star image so what
happens if I insert into the mask image
the soda mockup image specify the size
to match the background size at this
point all images outside the mockup area
have been
deleted the next thing is how to make
this soda bottle rotate let's analyze
together when we insert images into the
mockup actually this image has been
repeated infinitely we don't see it
because it is outside the element size
range so if I now want to see a
different area of the image I just need
to move it to the left a certain
distance right we'll reproduce it in CSS
in the background property in fact there
are two values that represent the left
and top distance of the image from the
element the default value is zero so if
you change this value the position of
the image will also change now when I
try to to create a hover effect on the
product the soda will rotate as
follows on the product I declare the
variable left to store the left position
value of the cover image and replace it
here use the transition property to make
the image rotate more
smoothly when the user hovers over the
product the left value changes causing
the image position to change as well
making the eye feel like it is rotating
so that's how we can create a 3D
rotating soda effect with just CSS now I
will continue designing the remaining
design the fact that I inserted the
image directly into the CSS made it
impossible for me to quickly create
another bottle of soda so instead of
directly inserting the image here I will
declare a variable in HTML with the main
value being the image path at this point
on the CSS side I just need to call that
variable to use back to HTML I created a
second soda product and of course it
will have a different cover art to keep
it in the same row I will use display
Flex
to have these two elements overlap each
other I will use position absolute
combine left and translate text to
Center the element when the user hovers
over the product I use translady to move
it up 120
pixels for additional decoration in the
banner I created a rock class inside
there are three images of decorative
rocks note that rock is not a child of
the product class with rock I use
position absolute and with inset zero it
will be the same size as the banner and
overlay the banner for each image inside
I also use position absolute to easily
move the position with the time to
create the effect when the user hovers
at 7 Seconds the first image will have a
height of 170
pixels left translate Tex minus
50% - 30 pixels from bottom because rock
is not a product so in catching the
hover of on the product we must use
has at this point I move it 50 pixels
down the remaining two images are
similar we set the height choose the
position for it then catch the event
when the user hovers to move the
position finally do you remember that
our product has two sodas lying on top
of each other in the default State I
will hide the second soda when the user
hovers in the second soda will show up
and create the effect of the soda
rotating and turning into another
soda and that's what I want to teach
everyone in this video we've covered a
lot of new CSS properties like aspect
ratio background blend mode mask image
hope this video will be useful if you
find it interesting don't forget to like
And subscribe to watch more interesting
videos every day and if you have any
questions or suggestions for the next
topic don't hesitate to leave a comment
thank you everyone so much for watching
and supporting my channel see you
everyone in the next video
[Music]
Voir Plus de Vidéos Connexes
Words in the middle of the horizontal lines (CSS Mastery # 007) | Coder Champ
next.js in urdu - 9 - Navbar Tutorial (Step-by-Step)
CSS Course | Make a Glassmorphic SignUp Page using Basic CSS | Mini Project | Web Development 23
CSS Tips And Tricks I Wish I Knew Before
Easy 2D to 3D Illustration Hack for Beginners | Adobe Illustrator Tutorial
Learn CSS in Hindi with animations
5.0 / 5 (0 votes)