Useful Tips

How to create impressive 3D graphics in CSS3

Pin
Send
Share
Send
Send


The Overview channel showed how to make a 3D cube on the bloggif.com online service. To do this, click on the 3D cube, and in the next window we begin to create it. To do this, add five images. Add. Consider the example of bears. We choose - the first, second, third figure, replace the second, fourth and fifth. Next, you need to select the rotation speed. Leave Rapide - this is the average speed. You can select the background on which the cube will be. If you want without a background, you just need to check the box - TRANSPARENT.

Choose blue. And the direction of rotation. Then we press the button - CREATE MY 3 D CUBE. Now, three d cube is ready. Before downloading, put a check mark - download without a logo and download my Gif. We select the folder to save, name the file and see what happened. The result was such a cube, gif animation. That's all. Apply the knowledge gained. Olga Taranukha was with you.

Why use CSS?

There are so many ways to create 3D graphics in HTML. Based on JS, Canvas, SVG, even WebGL-based solutions are available, and all of them have their advantages, but there is also CSS.

A CSS-based solution dispenses with images and can use a graphics processor to speed up graphics processing.

No plugins are required, and CSS can live outside the canvas walls on your page:

CSS 3D graphics are not as optimized as WebGL. A separate topic is incompatible browsers. Nevertheless, the inclusion of 3D objects in web projects opens up new areas of work, and can be used today.

Not all browsers fully support the 3D transforms used in this article, so for brevity I will use the -webkit prefix.

Do not forget to include prefixes for Mozilla, Opera, MS, as well as versions without prefixes if necessary. Full CSS versions (with prefixes) are in the project files.

The basics: creating a 3D cube

First, we will build a basic 3D cube by placing and animating it in 3D space. First, write HTML code that will represent parts of a 3D cube:

I used the figure element, but you could use a div, span or any other type of element at your discretion.

In this HTML code, two main parts can be distinguished: the scene on which everything is placed, and the cube placed on the scene:

Scene preparation

The first thing to do when building a 3D model is to create an element that acts as a scene.

Set the scene depth using the CSS perspective property:

Setting a larger value for the perspective property creates a less noticeable 3D effect, while a smaller one makes it more pronounced.

A value of 800 pixels or so is generally suitable for most small objects, but if you create something larger (such as a skyscraper) you can use a lower value to create more pronounced angles.

When setting the perspective property, you must also set perspective-origin (a property that determines the position of the virtual camera facing the scene), positioned on the X and Y axes.

Creating forms: spatial thinking

Creating 3D shapes using HTML and CSS involves representing an object as a set of two-dimensional planes.

Instead of drawing vertices and collecting shapes from points and lines, which, as you know, is done in other 3D programs, we will work with two-dimensional planes, positioning them at the same time. We assemble a cube of six planes corresponding to the sides, apex and base.

First, let's give the figure elements a shape and style:

The next step is to indicate where they should be located in 3D space.

Conversion time

Place the shapes using the transform property. CSS transformations consist of a series of instructions that tell the form how to move, rotate, tilt, and scale. Instructions are read from left to right.

Pay attention to the use of the transform-style property: when it is set to preserve-3d, transformations over the sides of the cube will be carried out in their own 3D space.

We also define the point relative to which the transformations are performed.

The transform-origin property sets the point in X, Y, Z coordinates, which acts as the center of rotation (this is the middle of the front of the element):

The front figure is shifted 150 pixels forward, the rear one is flipped 180 degrees and shifted 150 pixels to the back of the scene.

The order here matters - the conversion rules are applied from left to right. For the second transformation, a positive value is set: after rotation, the front side is facing the back of the scene.

As before, the order of transformation rules matters. If the element is rotated, its Z-axis will be at a different angle, which will affect any other transformation.

Now place the other sides:

Now we completely have the cube located on the 3D scene.

Move, move

Let's rotate our 3D creation on stage using CSS animations:

CSS animations are created using a sequence of key frames. Keyframes are a set of object states established using percentages.

Animation starts with a zero rotation and ends with a complete rotation of the element around the Y axis.

Apply this keyframe set with the animation property:

The rotation animation applied here is designed for 10 seconds, repeats endlessly with a constant linear speed:

We have a cube rotating on stage, but now it is lit from all sides. To add a shadow without using more selectors, we will use pseudo-selectors.

Pseudo-selectors are something like additional HTML elements that can be inserted before and after the contents of an element.

They provide us with additional features and may contain gradients, colors, or even text. This way we can animate the dimming on each side of the cube.

We need two gradients: one for the case when the surface turns to the left, the other for rotation to the right:

The before and after elements in this example are pseudo-selectors that can be styled and animated.

It is important to note that this feature is not yet fully supported by browsers - Google Chrome, Firefox and IE10 offer different levels of support - and the situation may improve.

Apply animation to each pseudo-selector to determine when to display / hide these gradients:

Each animation consists of a set of key frames that show or hide the gradient during the animation.

The following are keyframes applied to the back side:

The full set of animations, along with prefixes for each browser, is in the project files.

Top and bottom

The next step is the top and bottom of the cube. A vertex needs a gradient that looks like nothing is moving.

Add a gradient to the top element and rotate it in the opposite direction:

The base of the cube will not be visible, but we can use it to add the box-shadow attribute:

More than just color

At this point, using CSS only, we created a shaded animated cube, albeit with solid sides. Since we work with HTML elements, we can play around with the content.

The faces of a cube can contain images, text, or even other animations. In the example below, I applied some background images from a Minecraft game:

The shading we added earlier is still present here, giving the sides of the cube a stronger sense of depth. This effect will work for any content in the figure element.

If animated shading and shadow are not enough, we can add a little more gloss to the scene using fancy WebKit filters (note that at the moment this function is only possible with WebKit):

Add content

Add the content that falls into the user's field of view when the cube is rotated. This will happen on the right side of the cube. We connect a little JavaScript to the work to call the “Follow” button (available on the Twitter buttons page).

The figure element with class right should contain something like this:

The Follow button is placed by adding an iframe rule to the CSS:

Tweet on a cube

Twitter provides an easy way to get the latest tweets as widgets. To install the widget, log in to your Twitter account and go to the Twitter widget page.

Select “Create new button”, then enter your Twitter username in the Username field. In this example, we use the netmag login.

Click Create widget button to generate the embed code.

We can stylize the widget and set the width, height and some data values ​​in the code. Replace YOUR_WIDGET_ID with the identifier provided in your embed code:

Transformations

For shading, we don’t need animation with key frames: it will appear when you hover or trigger an event.

Add a few transitions to the shading of the pseudo-selectors:

For the pseudo-selector on the right side, the opacity value of 0.4 is set. This adds a little shadow, and you can animate the opacity so that the face becomes lighter when you turn to the front side.

The right: after pseudo-selector is hidden, since we will not rotate the cube as much as needed. The front side is darkened, however, it is lighter than the right side when it turns forward:

Hover Animation

Now, adding shading effects, we will create an animated “peeping” effect when the user hovers over the cube using the CSS hover state:

When you hover, the cube rotates 50 degrees to the left. This transformation is performed as a smooth transition by applying the transition property.

At the same time, the opacity of the pseudo-selectors on the front and right sides of the cube goes into a value of 0.2.

The result of all these transitions is a beautiful 3D rotation effect that allows you to hide additional content - and show it if the user hovers over the cube.

Full HTML and CSS code can be found in the project files:

Creating objects from flat HTML elements has a number of limitations: any object that you create must be done by combining flat forms to get the final result.

It is difficult to create curved objects, such as tubes and spheres, without using a large number of elements, so this solution is better suited to simpler objects.

But resorting to the use of shadows and animations, you can get impressive results with simple structures.

Performance and Testing

When creating 3D objects, you need to remember that browser performance and computer speed can vary greatly. CSS, in fact, is not optimized for graphically loaded, complex 3D scenes, so you need to be careful when working with public projects.

Test across platforms: visitors can also use mobile devices or outdated, slow computers.

And although it is only a matter of time before all browsers support 3D transforms, gradients and all the elegant touches that we used here, the reality is that most browsers still do not support them.

We must ensure that visitors using older versions of browsers do not get a distorted page.

One approach to solving this problem is to use feature detection and display an alternative version for browsers that do not support the desired properties.

In this case, we will use the Modernizr script to find out if 3D transforms are supported, and if not, display a static image.

To get started, enable Modernizr in the HTML header:

When loaded, the csstransforms3d class will be inserted into the tag. Then we will use this information to show or hide the backup option:

In this example, a static image is an alternative. Use the fallback div element to represent two-dimensional content in a browser or alternative message:

Next steps

A stylized 3D cube is probably not the first thing most web design customers are asked to do, but some of the above approaches may have different uses.

You can create a 3D transition effect when you hover over the logo - a catchy way to demonstrate a new product - or use these approaches to present and navigate complex data. Using the Z axis in the design opens the door to many interesting and fun ideas.

This publication is a translation of the article "How to create impressive 3D graphics in CSS3" prepared by the friendly team of the Internet technology project

Pin
Send
Share
Send
Send