Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to use CSS 3D transformation to create an isometric layout. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Css creates a 3D space

We took inspiration for this tutorial from Envato's latest initiative; the Envato element. Elements's home page provides a range of creative products (fonts, icons, graphic templates, etc.) that are displayed together in a neat isometric grid layout.

We will use CSS 3D transformations to recreate these isometric drawings.

Isometric projection is a method of presenting design in obvious three dimensions (usually used in engineering and games in the 1980s and 1990s, and 3D processing power is very limited).

These are not the three dimensions we encounter in real life, and they have no sense of perspective on the plane they display.

For many years, the network has been a two-dimensional environment, and we are used to positioning elements along two axes or directions (x-axis (horizontal) and y-axis (vertical)).

Note: the y-axis of the web is contrary to the original Cartesian coordinates because the web is read from top to bottom.

Projecting a 3D view requires the third axis, the z axis. This axis represents depth, and the direction in which the object moves along the z axis is relative to our point of view; it may move up and down, up and down, or at close range.

These three axes can be applied to the CSS transform function to create 3D projections. In the following demonstration, we use the and function to create an isometric projection of a rectangle:

Now that we have the basic principles of isometric projection, we can put it into practice. Let's start with HTML.

Similar to the Envato Elements home page, we have a grid layout. Our grid consists of one row and nine columns. Each column contains a product image, a link to the product page, and the elements shown below, which we will use to model image shadows.

Let's start by resetting the style of the default style for some elements.

These styles use to set all elements, which makes it easier to predict the total size of the elements. We also set the image rendering to remove the white space at the bottom of the image. Finally, we delete the element margins of the package image.

Then we continue with the style of rows and columns.

The above style sets the row to and the transform style to 3D so that the browser will correctly follow the z-axis transformation, rotate the row to create an isometric view, and finally split the columns in the row into two halves.

Next, we must add styles for the child elements that place rows and columns in the 3D view. This style of following is crucial. It must be declared on each element under the package so that they can be rendered correctly in 3D space, especially in Firefox, and the Z axis will take effect.

Next, we add styles to the class (which has been added to the product link anchor tag) and to the element (which will soon be shaded).

With this style added, the product links and elements now extend all the way to the entire container. We can also change the location of the element stack later.

The following styles control the location of image wrapper elements, padding, and some 3D footage. Set, so we will not see the stack below the translation or rotation elements, nor the reverse side of the image.

We apply the transition to the image and move it on the z-axis so that it "hovers" above the shadow. Again, we added some 3D content: and, so it will render the 3D view correctly.

Here is our shadow pattern. Because the image at this time is closer to the "floor" of the reflected shadow, the shadow dispersion should be narrow and the shadow shadow should be darker.

We have made some progress:

The hover effect will make each image thumbnail more attractive.

In hover, as shown in the code snippet above, we will first move the element stack up higher, so the image (and links) will appear above the rest of the grid.

We will also slightly enhance the image; move it away from the floor and closer to the light source. It is said that shadows should lose some clarity, so we have reduced the opacity of shadows.

In this tutorial, we used 3D transformations in CSS to build a copy of the Envato Elements equidistant mesh. We also learned how to add realism to shadows and light sources. Take a look at the demo, get the source files, and let us know what you do with them!

3D transform is a powerful CSS utility. But don't think they're just a head or toy that adds a fancy layer to the network. If applied carefully, 3D elements can also solve some notorious design problems.

This is the end of this article on "how to use CSS 3D transformation to create an isometric layout". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.