It is often necessary to animate page elements without resorting to time-consuming options for using JavaScript. The transform CSS rule is a convenient tool for imparting complex dynamics, the creation of which does not require much effort.
All the basic actions for changing an element: position, size, rotation, curvature and rotation are available as applied to the main elements of HTML layout, and in combination with each other allow you to create complex dynamics.
Key features of the transformation rule
The transform CSS rule is designed to use simple transformations of page elements and is used very simply:
- transform: none;
- transform: function ();
- transform: function () function () function ();
The following example lists the main functions that can be used to transform elements, their action is shown in the examples.
Simple applications of transformations are associated with buttons and elements of the implementation of the dialogue with the visitor. It is practical to use dynamic effects to accompany mouse movements or to draw attention to promotions for services or goods offered by the owner of the resource.
The transformation is in demand in the menu when the visitor has not yet chosen the desired direction of action, but the mouse is already on the element: menu item. In this case, something can transform: increase in size, lean, rotate, or otherwise “make it clear” that the page is “active” and ready to perform an action.
It’s convenient to use the transform CSS rule to create hints and comments on page elements. The visitor is not always oriented on the page, especially when he first came. By tradition, each site developer believes that the design of a web resource and dialogue with a visitor is his area of competence.
From the point of view of the visitor, it is up to him to decide what functionality he expects from the site he came to, what design and dialogue should be. If something is not like here, he will find what he likes on another web resource.
Alignment of elements during transformation
Transform CSS animation is allowed through several functions in one rule. You can set the positive and negative values of the transformations, it is important that they make sense.
The example shows how the image changes its appearance when you hover the mouse if the transformation rule includes immediately:
The triple effect is easy to plan, but often you can not do without a long selection of values. It is one thing when one rule can precisely determine the necessary changes: they are known. Another is when you have to invent dynamics according to the meaning of the element.
In some cases, it is better to combine, for example: two divas are nested in each other. One rule of transformation is assigned to the outside, another to the inside. When the general logic of the necessary changes is determined, it can be transferred to the rule of one element.
In the example, the resulting solution resembles a transformation in three-dimensional space, but this is not related to CSS 3D transform rules. Considering the Z axis and manipulating the reverse side of an element is a separate group of properties and rules.
However, whatever the graphic idea, all the transformations are made on the plane, the effects are formed due to the visual perception and the correct change in the forms of the elements. The content of elements and the pattern of lines matter.
CSS Rules Features
As a general rule of CSS, transform style is the static logic of element transformations, the algorithm of which cannot be changed after a set of rules is formulated.
This does not go beyond the concept of cascading style sheets, but in each particular application it is necessary to take into account the factor that the dynamics here have neither events, nor conditions, nor the ability to manipulate the process itself.
The developer can only formulate the desired transform rule, and CSS will execute it exactly. You can’t change anything later or during the operation of the web resource.
Moreover, the dimensions of the block, its content, the shape and color of the internal elements are essential. Using the rules of transparency (opacity), you can get complex images, and superimposing them on top of each other - complex effects.
An essential circumstance is the uncontrollability of all transformations. All rules are executed by specific algorithms, perceiving only those values that are specified in the parameters of the transformation functions. The correct combination of functions and their values is determined by the resulting transformation algorithm.
Keep in mind that changing the content of an element, especially the background-image property, can lead to a “startle” - violation of the necessary transformation logic due to the technical features of the implementation (browser, protocol, server, etc.). It makes sense to hide the element before changing its content: show and continue when the update process is already completed.
Server involvement in the transformation
If the developers left the need for a full page refresh quite a long time ago and technologies like AJAX became the norm for displaying and updating page elements, then the dynamics of changes to the style sheets during the operation of the web resource is quite expected.
The traditional approach, when the pages were formed by the developer and the site was commissioned as is, is already out of date. Why not develop the entire set of site files as a result of the dynamics of the dialogue with the visitor: "on the fly."
Using JavaScript + AJAX is the element’s dynamics, but using a server-side language to modify the CSS file is a reasonable additional option. Visitors vary not only in the temperament of the work, but also in the functionality that they expect and the ability to display it.
Offering the necessary functionality in the format of adaptable dynamics (changing CSS rules on the fly), you can achieve great success and change the rating of the web resource for the better.