Excerpt from Tiffany's new book "CSS Master, Second Edition"

CSS transformation feature gives us the ability to create effects and interactions that other methods cannot achieve. Combining transitions and animations, we can create elements and interfaces that rotate, dance and scale. Especially three-dimensional transformation, it can simulate physical objects. This article will explore two-dimensional transformation functions (three-dimensional functions are introduced here).

There are mainly four types of two-dimensional transformation functions: rotation, scaling, tilt and displacement. Six other functions allow us to transform elements along a single dimension: scaleX and scaleY; skewX and skewY; and translateX and translateY.

Key Points

• The four main two-dimensional transformation functions in CSS are rotate, scale, skew, and translate. These functions allow us to create effects and interactions that other methods cannot achieve, including elements and interfaces that rotate, dance, and scale.
The
• rotate() function rotates elements at a specified angle around the transform-origin. Can be rotated clockwise or counterclockwise. The scale function can increase or decrease the size of an element in the X dimension, the Y dimension, or both. The translate function is the distance between the drawing position of the element and its layout position by the specified distance.
• Transform functions can be combined to create more complex transformations. However, the order in which these functions are applied is important because it changes the result significantly. This is because the browser multiplies the matrix of each function by creating a new matrix.
• The latest version of the CSS transformation specification adds translate, rotate and scale attributes to CSS. These properties work very similarly to their corresponding transform functions, but the values ??are space-separated rather than comma-separated. This allows the rotation, translation, or scaling transformations to be managed individually from other transformations. However, browser support for these properties is still limited.

rotate()

Rotation transform rotates elements around the transform-origin at a specified angle. Use rotate() to tilt elements clockwise (positive angle value) or counterclockwise (negative angle value). Its effect is much like a windmill or wind wheel, as shown below.

The

rotate() function accepts the value of the angle unit. Angle units are defined by CSS values ??and unit module level 3. These may be deg (degree), rad (radian), grad (gradient), or turn units. A full rotation is equal to 360deg, 6.28rad, 400grad or 1turn.

Unless animated or transitioned, the rotation value exceeding one rotation (e.g., 540deg or 1.5 turn) will be rendered based on the remaining values. In other words, the rendering effect of 540deg is the same as that of 180deg (540 degrees minus 360 degrees), and the rendering effect of 1.5 turn is the same as that of .5 turn (1.5 – 1). However, transitions or animations from 0deg to 540deg or from 1 turn to 1.5 turn will rotate the element one and a half times.

Two-dimensional scaling functions: scale, scaleX and scaleY

Using the scaling function, we can increase or decrease the rendering size of an element on the X dimension (scaleX), Y dimension (scaleY), or both (scale). Scaling is shown in the figure below, where the border represents the original boundary of the box and the number indicates its center point.

Each scaling function accepts a multiplier or factor as its parameter. This multiplier can be almost any positive or negative number. Percentage values ??are not supported. A positive multiplier greater than 1 increases the size of the element. For example, scale(1.5) increases the size of an element in the X and Y directions by 1.5 times. A positive multiplier between 0 and 1 will reduce the size of the element.

Values ??less than 0 will also cause the element's size to scale or decrease and create a reflective (flip) transformation.

Warning: Using scale(0) will cause the element to disappear because the result of multiplying the number by zero is zero.

Create the identity transform using scale(1), which means it is drawn onto the screen as if no scaling transform is applied. Using scale(-1) will not change the draw size of the element, but negative values ??will cause the element to be reflected. Even if the element does not display the transform, it still triggers the new stacking context and include blocks.

You can use the scale function to scale the X and Y dimensions respectively. Just pass two parameters: scale(1.5, 2). The first parameter scales the X dimension; the second parameter scales the Y dimension. For example, we can use scale(-1, 1) to reflect an object individually along the X-axis. Passing a single parameter will scale two dimensions by the same factor.

Two-dimensional translation functions: translateX, translateY and translate

The translation element offsets the distance between its drawing position and its layout position by a specified distance. Like other transformations, the translation element does not change its offsetLeft or offsetTop position. However, it affects its visual position on the screen.

Each two-dimensional translation function (translateX, translateY, and translate) accepts length or percentage as parameters. The length units include pixels (px), em, rem, and viewport units (vw and vh).

translateX function changes the horizontal rendering position of an element. If the element is 0 pixels from the left, transform: transitionX(50px) moves its rendering position 50 pixels to the right of its starting position. Similarly, translateY changes the vertical rendering position of the element. TransitionY(50px) shifts the element vertically by 50 pixels.

Using translate() we can move elements vertically and horizontally using a single function. It accepts up to two parameters: the X translation value and the Y translation value. The figure below shows the effect of an element with translate(120%, -50px) transform value, where the green square on the left is in its original position, and the green square on the right is horizontally translated by 120% with its element (dashed border) and vertically translated by -50px.

Passing a single parameter to translate is equivalent to using translateX; the Y translation value will be set to 0. Using translate() is a more concise choice. The application of translate(100px, 200px) is equivalent to translateX(100px) translateY(200px).

Positive translation value moves the element to the right (for translateX) or down (for translateY). A negative value moves the element to the left (translateX) or up (translateY).

Panning is especially useful for moving an item to the left, right, up, or down. Updating the values ??of left, right, top, and bottom attributes forces the browser to recalculate the layout information of the entire document. However, the transformation is calculated after the layout is calculated. They affect the location of the element's display on the screen, but not its actual size. Yes, it's weird to think of document layout and rendering as separate concepts, but in terms of browser, they are indeed separate. Transform properties may appear in browsers near you

The latest version of the CSS transformation specification adds translate, rotate and scale attributes

to CSS. Transform properties work very similarly to their corresponding transform functions, but values ??are space-separated rather than comma-separated. For example, we can express transform: rotate3d(1, 1, 1, 45deg): rotate: 1 1 1 45deg. Similarly, translate: 15% 10% 300px is visually the same as transform: translate3d (15%, 10%, 300px), and scale: 1.5 1.5 3 is the same as transform: scale3d (1.5, 1.5, 3). Using these properties, we can manage rotation, translation, or scaling transformations individually, rather than others.

At the time of writing, browser support for transform properties is still very sparse. Chrome and Samsung Internet support them out of the box. In Firefox 60 and later, support is hidden behind a flag; access about:config and set layout.css.individual-transform.enabled to true.

skew, skewX and skewY

The tilt transformation changes the angle and distance between points while keeping them on the same plane. Incline transformations are also called

shear transformations

, and they distort the shape of the element as shown below, where the dashed lines represent the original bounding box of the element.

The tilt functions (skew, skewX, and skewY) accept most angle units as parameters. Degree, gradient, and radian are effective angle units for the tilt function, while the turn unit (perhaps obviously) is not.

skewX function cuts elements in the X direction or horizontal direction (see the figure below). It accepts a parameter that must be an angle unit. A positive value moves the element to the left, and a negative value moves the element to the right.

Similarly, skewY cuts elements in the Y direction or vertical direction. The following figure shows the effect of transform: skewY(30deg). The point to the right of the origin will move downward as the positive value increases. Negative values ??move these points upwards.

This leads to the skew function. The skew function requires one parameter, but can accept up to two parameters. The first parameter tilts the element in the X direction, and the second parameter tilts the element in the Y direction. If only one parameter is provided, the second value is assumed to be zero, making it equivalent to tilting only in the X direction. In other words, the rendering effect of skew(45deg) is the same as skewX(45deg).

Current transformation matrix

So far, we have discussed transformation functions separately, but they can also be combined. Want to scale and rotate objects? No problem: Use the transform list. For example:

<code>.rotatescale {
    transform: rotate(45deg) scale(2);
}</code>

This produces the results shown below.

Sequence is important when using transform functions. This is best illustrated by illustrations, so let's take a look at an example. The following CSS will tilt and rotate an element:

<code>.transformEl {
    transform: skew(10deg, 15deg) rotate(45deg);
}</code>

It gives the result as shown below.

What happens if you rotate the element first and then tilt it?

<code>.transformEl {
    transform:  rotate(45deg) skew(10deg, 15deg);
}</code>

The effects (as shown below) are very different.

Each transformation has a different current transformation matrix, which is created in the order of its transformation functions. To fully understand the reasons, we need to learn some matrix multiplication. This also helps us understand matrix and matrix3d ??functions.

Matrix multiplication and matrix functions

Matrix is ??an array of numbers or expressions arranged in rows and columns of a rectangle. All transformations can be represented using a 4×4 matrix as shown below.

This matrix corresponds to the matrix3d ??function, which accepts 16 parameters, each parameter corresponding to a value of the 4×4 matrix. Two-dimensional transformations can also be represented using a 3×3 matrix, as shown below.

This 3×3 matrix corresponds to the matrix transformation function. The matrix() function accepts six parameters, each corresponding to the value a to f.

Each transformation function can be described using matrix and matrix or matrix3d ??functions. The figure below shows the 4×4 matrix of the scale3d function, where sx, sy and sz are the scaling factors of the X, Y, and Z dimensions, respectively.

When we combine transformations (for example, transform: scale(2) translate(30px, 50px)), the browser multiplies the matrix of each function by creating a new matrix. This new matrix is ??the matrix applied to elements.

But matrix multiplication is like this: it is not interchangeable. For simple values, the product of 3×2 is the same as the product of 2×3. However, for a matrix, the product of A×B is not necessarily the same as the product of B×A. Let's look at an example. We will calculate the matrix product of transform: scale(2) translate(30px, 50px).

Our elements have been scaled twice as scaled, then translated 60 pixels horizontally and 100 pixels vertically. We can also use the matrix function to represent this product: transform: matrix(2, 0, 0, 2, 60, 100). Now let's switch the order of these transformations, i.e. transform: translate(30px, 50px) scale(2). The results are shown below.

Note that our object is still scaled twice as scaled, but here it pans horizontally by 30 pixels and vertically by 50 pixels. Using the matrix function, this is transform: matrix(2, 0, 0, 2, 30, 50).

It is also worth noting that the inherited transformation function is similar to the transformation list. Each child transform is multiplied by any transform applied to its parent. For example, consider the following code:

<code>.rotatescale {
    transform: rotate(45deg) scale(2);
}</code>

This is the same rendering effect as the following:

<code>.transformEl {
    transform: skew(10deg, 15deg) rotate(45deg);
}</code>

In both cases, the current transformation matrix of the p element is the same. Although we have been focusing on two-dimensional transformations so far, the above also applies to three-dimensional transformations. The third dimension adds the illusion of depth. It also brings some extra complexity in the form of new functions and properties.

Frequently Asked Questions about Two-Dimensional Transform Functions in CSS

What are the different types of two-dimensional transformation functions in CSS?

There are many types of two-dimensional transformation functions in CSS. These include translate(), rotate(), scale(), skew(), and matrix(). Each function allows you to manipulate elements in different ways. For example, the translate() function moves an element from its current position, while the rotate() function rotates the element around a given point. The scale() function changes the size of an element, and the skew() function twists the element along the X-axis and Y-axis. The matrix() function combines all these transformations into one.

How to use translate() function in CSS?

The translate() function in CSS is used to move an element from its current position. It has two parameters: the X-axis value and the Y-axis value. For example, if you want to move the element 50 pixels to the right and 20 pixels to the down, you can use the following code: transform: translate(50px, 20px);. This will move the element to a new location without affecting the layout of other elements on the page.

Can I combine multiple 2D transform functions in CSS?

Yes, you can combine multiple 2D transform functions in CSS. To do this, just list each function in the transform property and separate it with spaces. For example, if you want to scale an element to twice its size and then rotate it 45 degrees, you can use the following code: transform: scale(2) rotate(45deg);. Transforms are applied in the order listed.

What is the purpose of the matrix() function in CSS?

The matrix() function in CSS is a very powerful transformation function that allows you to perform multiple transformations at the same time. It has six parameters representing the value of the 2×3 matrix. This matrix is ??used to perform a combination of scaling, rotation, tilt, and translation transformations. Although it is more complex than other transform functions, it provides a high degree of control over the transform process.

How does the skew() function work in CSS?

The skew() function in CSS is used to twist elements along the X-axis and Y-axis. It has two parameters: the inclination angle of the X-axis and the inclination angle of the Y-axis. For example, if you want to tilt the element 30 degrees along the X axis and 20 degrees along the Y axis, you can use the following code: transform: skew(30deg, 20deg);. This will distort the element, creating a tilt effect.

Can I use a 2D transform function for any HTML element in CSS?

Yes, you can use a 2D transform function for any HTML element in CSS. This includes block-level elements (such as divs) and inline elements (such as spans). However, remember that the way the transformation is applied may vary depending on the type of element and its position in the layout.

What happens if I don't specify units for the translate() function in CSS?

If you do not specify units for the translate() function in CSS, these values ??will be treated as pixel values. This means that transform: translate(50, 20); is equivalent to transform: translate(50px, 20px);. However, it is usually best to always specify units to ensure clarity and consistency.

How to animate 2D transformations in CSS?

You can use the transition property to animate a 2D transformation in CSS. This property allows you to specify the duration, timing function, and delay of the transition. For example, if you want to animate the rotation in 2 seconds, you can use the following code: transition: transform 2s; transform: rotate(45deg);. This will smoothly animation the rotation for the specified duration.

What is the difference between rotate() and skew() functions in CSS?

The rotate() and skew() functions in CSS operate on elements in different ways. The rotate() function rotates elements around a given point, while the skew() function twists elements along the X and Y axis. This means that rotate() changes the orientation of the element, and skew() changes the shape of the element.

Can I use 2D transform functions with other CSS properties in CSS?

Yes, you can use 2D transform functions in CSS with other CSS properties. For example, you can use the transform property in conjunction with the border-radius property to create a rotating element with rounded corners. However, remember that the order in which properties are applied affects the final result.

The above is the detailed content of How to Use 2D Transformation Functions in CSS. For more information, please follow other related articles on the PHP Chinese website!