Creating a 3D Soda Bottle Effect in CSS

Sep 17, 2024

3D Soda Bottle Rotation Effect Using CSS Only

Introduction

  • Video focuses on creating a 3D soda bottle rotation effect using only CSS.
  • Responding to viewer questions about creating effects with CSS.
  • Encouragement to like and subscribe for more content on programming and web design.

Creating the Soda Bottle Mockup

Ingredients for the Mockup

  • Two main ingredients: the bottle and the cover photo.
  • Cover Photo Selection:
    • Use FreePic to find suitable images by searching "Soda Mockup".
    • Remove background and crop excess space.
    • Download the final image in PNG format.

HTML Structure

  • Create a banner class:
    • Contains a product class for product images.
    • Each soda class represents an individual product image.

CSS Styling

Banner Setup

  • Set height to match device screen height.
  • Use overflow: hidden to remove elements outside the frame.
  • Use position for layout.

Product Class

  • Set background color to red for visibility.
  • Define width and height for layout.
  • Use positioning to center elements.
  • Apply transition for hover effects.

Soda Class

  • Use the soda mockup image as the background:
    • Set background size to 100% height and 280px width.
    • Use aspect-ratio for responsiveness to avoid manual height adjustments.

Image Masking

  • Use background blend mode with the value 'multiply' to merge images.
  • Use mask image property to crop images to the mockup shape.
    • Example: Use a star image to demonstrate masking.

Rotation Effect

Implementing Rotation

  • Moving the image to create a rotation effect:
    • Change the left position value to shift the visible area of the image.
    • Use transition for smooth rotation on hover.

Creating Multiple Soda Bottles

  • Declare variables in HTML for image paths to streamline the process.
  • Use Display: Flex for alignment and position: absolute for overlapping elements.

Decorative Elements

Rock Class

  • Create a rock class with decorative images, not as children of the product class.
  • Use position: absolute to overlap the images with the banner.
  • Set hover effects to move rocks into view.

Final Touches

  • Hide the second soda by default.
  • Show the second soda on hover to create the look of rotation and transition.

Conclusion

  • Reviewed new CSS properties: aspect ratio, background blend mode, mask image.
  • Encouragement for viewers to engage with questions and suggestions for future topics.
  • Thank the audience for their support and interest.