Learn about CSS: 3D applications (continued)

Tram Ho

Preamble

Following the previous post, this article will be about the practical application of 3d to our website.

Website mockup 3d hover

Introduce

Mock up is a miniature model, is a simulation image of Designer’s design that appears in real life – created as a vector file or PSD designed. But here I use it as a design drawing capable of ‘floating’ on the site. This mock up may include images, specifically the ‘layers’ you want to place in your design. In this example, I simply use the whole shape drawn with SVG (see how to draw SVG here ).

As you can see, my lesson is in 3 classes, each class will have its own unique ‘story’. Of course, making as many classes is up to you

Create a flat shape

First of all, it is necessary to create an initial shape for the mock up. The picture I drew like this:

For each layer you want, create a separate group for the layer and name the layer ‘layer-x’ to then easily style the whole layer:

And this is css reference

If you use images for mockups, then just replace the svg tag with the img with the image link.

Pay attention to this line

Because I am making a normal flat image, it should be set to zero. Next, the number of angles per params will determine the ’tilt’ of the mockup from the eye.

In order for the inner layers to follow the father, and the visible layers overlap, I use the absolute position:

Now, after some css work so that the items in the mock are displayed in the desired position, the next thing is to make it ‘inclined’.

Since I have covered the whole thing with .container , so now the father is inclined that the items inside will also tilt. Now I just need to change the angle in the top container from 0 to whatever angle I find fit. This work sometimes has to ‘grope’ and feel

Insert ‘3d layer’ effect

Currently, you can see that our mock up image is already tilted, but I haven’t seen the different ‘layers’ yet. This is because from now on the layers are now ‘attached’ to their parent .container . Now just for each layer to move a little 3d is okay. Each layer will be shifted differently, layer 1 will remain the same, layer 2 will ‘shift’ to surface slightly above layer 1, layer 3 adds a little more. Of course, shifting position, I will use transform: translate;

The reason for coming here is to move the layers to create 3d effects, because if you guide you to translate right from the step before tilting, then in theory, you create the correct 3D space for the layer, and then move all 3 layers as a group at the same time. And as for now, it’s like being reluctant to create a mockup. However, if you do so, while on the vertical projection, it is difficult to recognize how much each layer has translated, and it is also difficult to control the distance of the layers so that the tilt angle you want, the layer separates enough. pretty. So don’t try to create it right from the beginning.

And because I created the distance between the class planes, the main task would be translateZ. But here I find it is not so beautiful so add translate Y to look for 3 separate layers clearly

So considered as done. But as I see it to be quite boring, so it was changed to mock up changes the angle when hovering on. Such display on the site will be much more impressive. Here is my detailed post:

https://codepen.io/bunnypi04/pen/yLeQpLr

Isometric Model

Introduce

The next application example is based on an image type called Isometric. In short, Isometric is a method of describing the appearance of three-dimensional objects in two-dimensional space, a method of drawing to create 3D effects based on actual size. The drawing board consists of three surfaces according to the size of the edges, in which the three coordinate axes appear the same and the angle between any two of them is 120 degrees. Isometric is actually applied a lot, creating a 3D feeling For photos, typically some kind of restaurant games that I play often. Can use the Isometric keyword to better visualize it:

Base

Basically the construction, it will be similar to creating mock ups above:

  • Draw the original flat shape
  • Choose an angle for ‘ground’ that contains the entire object
  • Raise the layers to the desired height

The hardest thing is to choose an angle that is sufficient for the Isometric effect. In the previous post, I also introduced about rotate() in 3d then, below will lead the image to easily visualize how to rotate:

I created a flat pattern as follows:

Handling

This is the model I intend to make (simple for easy to understand)

Looking at this image, we can know that we need to rotate 2 axes:

  • First of all is the X-axis to make ‘the plane (paper) standing in front of you will lie down as the floor’
  • Follow the Z axis to rotate the angle of the paper from the left (or right) to the middle of the paper (because here I make square paper).

According to theory, the 3 axes of the coordinate system will be equidistant from 120 degrees. However, with the inclination of the ‘floor’ plane which is any x 1 angle in the direction of the rotation, the angles against Oxygen will not be exactly 120 degrees compared to the standard Oy. Here, I choose to tilt the Z axis to 45 degrees ( rotatexZ(45deg) ). of course rotateY remains to 0, it will result in the square diagonal overlapping the Oy axis. At this point, you can choose how much you can rotate with the Ox, and this rotation will determine how our eyes compare to the ‘floor’.

Now let’s test it out: for the guy to rotate, the absolute children will be eaten:

By now, you have achieved the intended result

And of course, leaving the whole thing boring, I added a little hover effect for appealing:

The end result is:

https://codepen.io/bunnypi04/pen/wvMQZBj

 

3D builder tools

Tridiv

In the process of learning about 3D applications, I have found a pretty good and useful tool if you are persistent and know how to use it: http://tridiv.com/

With this tool, you will draw the basic shapes, then the pplication will render the css and the corresponding style for what has just been created. The pictures are only available here: Cylindrical block, 6-sided box, Pyramid, and prismatic block (I don’t know if it’s true or not)

However, getting started using this tool is a little bit confused, so I’ll give a brief guide on how to use it

Note before use

As the previous article said, in 3D except for circle and border-radius, it does not create anything ‘curved’ at all. In the previous article there was also a guide to ‘fake’ the surfaces for you. Therefore, this tool can not create curves. The actual cylinder here is made up of 2 round bottom faces + the side is made up of rectangles.

So don’t expect anything on these pretty surfaces

User manual

When opening the app, there will be 4 screens to view 3D objects: Isometric screen, vertical projection screen, horizontal projection screen, side projection screen. All screens can move the coordinate axis. Isometric face alone, you can change the viewing angle by holding the mouse move.

Get this started.

I will use this simple pyramid as a model. Analysis will include: each floor is a rectangular box, the ladder is a triangular prism, that’s all.

Let me start creating the first floor first. Clicking the ‘add cuboid’ button will give you a rectangular box. By default, if created without dragging, the center of the image will be the origin of the coordinate system.

Take a look at the tool bar on the right, which has the following parameters:

  • Zoom: zoom in and out to see images more closely (smaller perspective)
  • Snap to grid: Turn on ‘On’ so that when moving an image, it will only move in a unit defined in snap. So to easily align the location more accurately
  • Snap: Unit to move. This snap will be drawn as a grid, the smallest mesh on the screen that is currently visible. Currently set to 0.5, ie when the Snap to Grid is On, the smallest displacement unit is 0.5px.
  • Type: type of the currently selected block
  • Name: Name the blocks for easy identification, after rendering will be used as the class name
  • x, y, z: are coordinates of the center of the cube on space.
  • w, h, d: is the width, height and thickness of the block
  • x deg, y deg, z deg: tilt to the sides (same as rotate, unit is deg)
  • corner: corner Of course, it is not possible to create a curve, so these will be rectangular faces like the cylinder above
  • Shape style: opacity: The ‘transparency’ of the block
  • Colors: if you want the block to have faces of any color, open and correct the corresponding color
  • Images: Instead of single-colored faces, you can replace it with background-image by opening this and replacing it accordingly.

In fact, you can directly adjust the size by clicking on each image, will be able to stretch the dimensions (corresponding to the projection screen that shows that face), or adjust the position by dragging to where . However, to be most accurate, you should use this tool bar.

The center of the x, y, and z positions can, of course, be placed anywhere, but should be chosen so that all of the images are most easily aligned: near the origin. As my picture has a symmetrical center, so I chose the vertical axis with x = 0 and z = 0 as the center for most images.

At this point, it is easy to draw a picture like this:

See his results here

Based on the illustration, it can be seen that the position of the figure compared to the origin of the coordinates is quite ‘balanced’. Once you have the completed brick, all you need to do is get the rendered image.

There are 2 ways to get the newly created 3D model:

  • Embed images in web
  • Or take html css and bring it back to the web

In the right corner, select to preview mode, you will see the embedded link on the other side, and on the left of the preview is the created html css.

For now just take it away:

With embedding, I get the following result:

Also using html css, will have the following result:

https://codepen.io/bunnypi04/pen/eYJxVBZ

Using rendered css html will help me look ‘cool’, and easily customize it directly instead of going to tridiv to edit images, so I recommend this way.

3D transform webflow

In addition, there is an app that looks ‘pretty good’ to create 3D space images: http://3d-transforms.webflow.com/

I have not had time to learn about this tool because it looks a bit complicated. However, it seems that there will be more custom options for the beautiful model than the above app. If you are interested and you can find out

Conclusion

Through 2 application demonstrations, hope that you will be more proficient in creating 3D images, or create with tools and throw them on the web ‘flaring’ everyone =))

Share the news now

Source : Viblo