Website Programming: simple 3D modeling on a Website Pure HTML and CSS in Responsive Way

   Bandung, Indonesia, October 24, 2020, 15:03PM - This is 3D modeling, 3D modeling is a technique that producing a 3D digital representation of an object. 3D modeling can be generated automatically or manually by trigger like touch or pointer. Models are oftern exported to other software for the climax result. In learning 3D modeling can be a challenge wuth complicated programs and modeling principles which based on fundamental art skills. In terms to learn 3D modeling, we have to use specific software but to have pure software we have to buy the software for a few dollars, and for us who are learning for fun or want to start from the basics, can't afford to spend the money 

    So, I got an idea to make simple 3D modeling on a website with pure HTML and CSS, and I did it simply even though the result isn't like the pro developer. The result isn't smooth than I expected, but this can be my first step to 3D modeling, improve my imagination, and go to the next level like a Blender(3D modeling software). Before we start the lesson, I suggest to <Download Images> from my google drive so we can adjust the coding for the images and get the result like the gif I show all the time. (To see the result, you have to move your pointer over the image and if you open the website with a smartphone you have to touch the image, so the image can spin)

 HTML

Head is the place where you put the information on your page also you can put a few codes that contain function like 

<meta charset = "UTF-8">(is a Unicode-based encoding that can support many languages and can accommodate pages and forms in any mixture of those languages)

<meta name="viewport" (viewport means the user's visible area of a website. The viewport varies with any device with different screen size, and it's common for a website to put viewport for the responsive website) content = "width=device-width, initial-scale=1.0">(for the responsive website)

<link rel = "stylesheet" href = "style.css">  link HTML to an external link like CSS, JavaScript, or Bootstrap.

The body is the place where you put content inside your page like images, text, videos. In the picture, I put 6 iPhone's pictures to represent the spin so I have an iPhone that can spin to 6 angles.

 CSS ( style.css ) external

In this part, we have to adjust settings for the basics of the website. The * in CSS means all elements, it's a universal selector. So we are setting all elements to have zero margins and zero paddings, thus making them look the same in the browser. The body means we only adjust all the elements in the body. The Card means I put a box for the image so the images have a space to spin with 300px width and 450px height.

In this part, we're going to focused on the function of the images. First, we used span to tag an inline container with a little calculation, so the image can spin. Second, we adjust the card(box) and the image for the pointer-events. Last, we used opacity as the main function. So every time the image spin, all the images aren't pile up instead we play the opacity like visible or not visible. 

Okay, that's all for this lesson. You can see that 3D modeling with HTML and CSS is much easier than you thought. Basically, the website is a place where you can put all your ideas, also I think many people have learned the website since they were in junior high school.

That's all for the lesson
Thank you for reading my blog and see you in the next article