Crazy 3D Rotation Effect Using CSS Only

Lun Dev

4 Jul 202407:39

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.