Lecture Notes: Creating a 3D Slider with Rotating Soda Effect using CSS

Introduction

• Topic: Creating a 3D slider with rotating soda effect using only CSS.
• Background: Previous video using JavaScript; new request for CSS-only implementation.
• Engagement: Like and subscribe for updates on programming and web design.

Steps to Create the Effect

Choosing and Preparing Images

• Use Freepik to find soda mockup images.
  • Keyword: soda mockup
  • Edit images by removing the background, cropping excess space.
  • Save the edited image in PNG format.

HTML Structure

• Create HTML structure with the following classes:
  • banner: Container for the slider.
  • product: Container for each soda product image.
  • soda: Class for individual soda product.

CSS Styling

Banner Styling

• banner class:
  • Height: Full-screen height.
  • Overflow: Hidden to remove elements outside the frame.
  • Positioning: Use CSS position.

Product Styling

• product class:
  • Background: Red color for visibility.
  • Width/Height: Define dimensions.
  • Position: Easy movement, 170px from bottom.
  • Centering: Use left and translateX with z-index to prevent overlap.
  • Transition: Smooth hover effect.

Soda Styling

• soda class:
  • Background: Use soda mockup image.
  • Size: Width 280px, adapt using aspect ratio for height.
  • Avoid manual height resizing: Use aspect ratio for responsive design.

Implementing Rotating Effect

Image Overlay

• Overlay product cover image using background-blend-mode: multiply.
  • Merge cover image with the mockup for a realistic effect.
• Cropping outside areas using mask-image.
  • Insert mockup image into mask-image to crop content based on its shape.

Background Position Change

• To show a different area of the image, adjust left/top values of the background property.
  • On hover, change the left value to simulate rotation.
  • Use transition for smooth effect.

Flexbox Layout

• Create multiple soda products and align using display: flex.
• Positioning elements using position: absolute and translateX.
• Hover effects using translateY for movement.

Additional Decorations

• Add decorative elements (e.g., rocks) using nested classes and absolute positioning.
  • Timed effects for hover using CSS animation.

Display Logic

• Hide default state for the second soda, show on hover.
  • Use CSS to toggle visibility and rotation effect.

Conclusion

• Covered new CSS properties: aspect-ratio, background-blend-mode, mask-image.
• Encouragement to like, subscribe, and comment for new topics.

Thank you for watching!