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 down 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 FreePic. Here, you just need to enter the keyword SodaMockup. 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 indexed to ensure it is not overlapped 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 declared 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 mock-up 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 responsive, 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 0. So if you change this value, the position of the image will also change. Now when I try 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 DisplayFlex. 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 within set 0 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 0.7 seconds, the first image will have a height of 170 pixels.
Left translate text minus 50%, minus 30 pixels from bottom because rock is not a product. So when catching the hover event 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.