Crazy 3D Rotation Effect Using CSS Only

Summary

This 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

00:00

🧪 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.

05:00

🎨 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.

Keywords

💡3D Slider

A 3D Slider is a web design element that allows for interactive, three-dimensional navigation or display of content. In the video, the 3D Slider is used to create a rotating soda effect, simulating the motion of a soda bottle turning into another, which is a central theme of the tutorial.

💡CSS

CSS, or Cascading Style Sheets, is a style sheet language used for describing the presentation of a document written in HTML or XML. The video focuses on demonstrating how to achieve a 3D rotating effect using only CSS, showcasing its capabilities for creating visually dynamic web elements.

💡Soda Bottle

The 'soda bottle' is the primary object in the video's demonstration. It represents the subject of the 3D rotating effect. The script describes how to use CSS to create the illusion of a soda bottle turning into another, which is the main visual effect being taught.

💡Rotating Effect

The rotating effect is a visual technique used in the video to simulate the motion of a soda bottle spinning. It is achieved through CSS properties that manipulate the background image of the soda bottle, creating a dynamic and engaging user experience.

💡Background Image

In web design, a background image is a graphic that is placed behind other content on a webpage. The script explains how to use a soda mockup as a background image and manipulate it to create the rotating effect, which is a key part of the 3D Slider demonstration.

💡Aspect Ratio

The aspect ratio is the proportional relationship between the width and height of an image or screen. The video mentions using the aspect ratio property in CSS to ensure that the mockup image maintains its proportions, which is crucial for responsive design.

💡Background Blend Mode

The background blend mode is a CSS property that allows elements to have a composite effect when layered. In the script, it is used to blend the soda mockup with the product cover image, creating a more realistic and visually appealing effect.

💡Mask Image

A mask image in CSS is used to hide or reveal parts of an element based on the shape of another image. The video script describes using a mask image to crop the product cover to the shape of the soda mockup, which is essential for achieving the final visual effect.

💡Hover Effect

The hover effect is a common interaction in web design where elements change appearance when a user hovers over them with a cursor. The video demonstrates creating a hover effect that triggers the soda bottle to rotate, enhancing the interactivity of the 3D Slider.

💡Responsive Design

Responsive design is an approach to web design that makes web pages render well on different devices and window or screen sizes. The video emphasizes the importance of using properties like aspect ratio to ensure the soda bottle's design is responsive and looks good on all devices.

💡Variable

In the context of the video, a variable is used in CSS to store and reuse values, such as image paths. The script mentions declaring a variable in HTML for the image path and then using it in CSS, which simplifies the process of creating multiple soda products in the design.

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]