CSS implements five common 2D transformations

CSS implements five common 2D transformations

2D transformations in CSS allow us to perform some basic transformation operations in two-dimensional space, such as moving, rotating, scaling or distorting. The transformed elements are similar to absolutely positioned elements and will not affect surrounding elements, but can overlap with surrounding elements. The difference is that the transformed elements will still occupy the space before the transformation in the page.

2D transformations can be achieved using the transform property in CSS and the following transformation functions:

  1. matrix(): specifies a 2D transformation in the form of a transformation matrix containing six values ​​(a, b, c, d, e, f), which is equivalent to directly applying a transformation matrix of [a,b,c,d,e,f];
  2. translate(): translates the object along the X and Y axes. This function requires 1~2 parameters. The first parameter corresponds to the X axis and the second parameter corresponds to the Y axis. If the second parameter is not provided, the default value is 0.
  3. translatex(): translates the object along the X axis (horizontally);
  4. translatey(): translates the object along the Y axis (vertical direction);
  5. rotate(): Rotate the specified object. The rotation angle can be specified in the function parameters;
  6. scale(): Scales the object. This function requires 1~2 parameters. The first parameter corresponds to the X axis and the second parameter corresponds to the Y axis. If the second parameter is not provided, the value of the first parameter is taken by default.
  7. scalex(): scales the object (changes the width of the element);
  8. scaley(): scales the object (changes the height of the element);
  9. skew(): Tilts and distorts the object along the X and Y axes. This function requires 1 to 2 parameters. The first parameter corresponds to the X axis, and the second parameter corresponds to the Y axis. If the second argument is not provided, the default value is 0;
  10. skewx(): distorts the object along the X axis (horizontally);
  11. skewy(): Distorts the object along the Y axis (vertical direction).

1. translate()

The translate() function is used to move an element horizontally (X-axis) or vertically (Y-axis) according to the specified parameters. The function's syntax is as follows:

translate(tx, ty)

Where tx corresponds to the distance the element moves in the horizontal (X-axis) direction, and ty corresponds to the distance the element moves in the vertical (Y-axis) direction. The parameter ty can be ignored (default is 0), and both parameters can be negative.

[Example] Use the translate() function to move the specified element:

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: #CCC;
            transform: translate(100px, 10px);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

The running results are shown in the figure below:

Figure: translate() function demonstration

If you just want to move the element horizontally or vertically, you can also use translateX() (to move the element horizontally) or translateY() (to move the element vertically). Both translateX() and translateY() functions only need to provide one parameter, for example:

translateX(100px); /* Equivalent to translate(100px, 0px); */
translateY(10px); /* Equivalent to translate(0px, 10px); */

2. rotate()

The rotate() function is used to rotate an element at a given angle. The function's syntax is as follows:

rotate(a)

The parameter a indicates the angle by which the element is to be rotated. If a is a positive value, it indicates clockwise rotation; if a is a negative value, it indicates counterclockwise rotation.

[Example] Use the rotate() function to rotate an element:

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: #CCC;
            margin: 20px 0px 0px 20px;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

The running results are shown in the figure below:

Figure: rotate() function demonstration

3. scale()

The scale() function is used to scale (enlarge or reduce) the specified element. The function's syntax format is as follows:

scale(sx, sy)

Where sx represents the horizontal scaling ratio, and sy represents the vertical scaling ratio. In addition, the parameter sy can be omitted and its default value is equal to sx.

[Example] Use the scale() function to scale the specified element:

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: #CCC;
            transform: scale(0.7);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

The running results are shown in the figure below:

Figure: scale() function demonstration

Tip: When the given parameter value in scale() is outside the range of -1 to 1, the element will be enlarged; when the parameter value is within the range of -1 to 1, the element will be reduced.

Similar to the translate() function, if you want to scale the element size only in the horizontal direction or only in the vertical direction, you can also use the scaleX() (scale the element horizontally) and scaleY() (scale the element vertically) functions. The scaleX() and scaleY() functions only require one argument, for example:

scaleX(0.5); /* Equivalent to scale(0.5, 1); */
scaleY(0.5); /* Equivalent to scale(1, 0.5); */

4. skew()

The skew() function is used to tilt and distort the element horizontally (X-axis) and vertically (Y-axis). The function's syntax is as follows:

skew(ax, ay)

The parameter ax represents the horizontal distortion angle of the element, and the parameter ay represents the vertical distortion angle of the element. In addition, the parameter ay can be omitted. If the parameter ay is omitted, its default value is 0.

[Example] Use the skew() function to distort the specified element:

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: #CCC;
            margin: 20px 0px 0px 10px;
            transform: skew(-15deg, 20deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

The running results are shown in the figure below:

Figure: skew() function demonstration

In addition, if you want to distort the element only in the horizontal direction or only in the vertical direction, you can also use the skewX() (scale the element horizontally) and skewY() (scale the element vertically) functions to complete it. The skewX() and skewY() functions only require one argument, for example:

skewX(15deg); /* equivalent to skew(15deg, 0deg); */
skewY(15deg); /* Equivalent to skew(0deg, 15deg); */

5. matrix()

The matrix() function can be seen as an abbreviation of the skew(), scale(), rotate() and translate() functions. All 2D transformation operations can be defined at the same time through the matrix() function. The function syntax format is as follows:

matrix(a, b, c, d, tx, ty)

The six parameters in the matrix() function correspond to the scaleX(), skewY(), skewX(), scaleY(), translateX(), and translateY() functions. You can use matrix() to implement various 2D transformation operations, for example:

  • translate(tx, ty) = matrix(1, 0, 0, 1, tx, ty);: where tx and ty are the horizontal and vertical translation values;
  • rotate(a) = matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0);: where a is the value of the degree. You can swap the sin(a) and -sin(a) values ​​to perform the reverse rotation;
  • scale(sx, sy) = matrix(sx, 0, 0, sy, 0 ,0);: where sx and sy are the horizontal and vertical scaling values;
  • skew(ax, ay) = matrix(1, tan(ay), tan(ay), 1, 0 ,0);: where ax and ay are the horizontal and vertical values ​​in deg.

[Example] Use the matrix() function to perform 2D transformation operations on elements:

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: #CCC;
            margin: 20px 0px 0px 10px;
            float: left;
        }
        .one {
            transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
        }
        .two {
            margin-left: 35px;
            transform: matrix(0.586, 0.8, -0.8, 0.686, 0, 0);
        }
        .three {
            margin-left: 40px;
            margin-top: 25px;
            transform: matrix(0.586, 0.8, -0.8, 0.866, 0, 0);
        }
        .four {
            transform: matrix(0.586, 0.8, -0.8, 0.586, 40, 30);
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
</body>
</html>

The running results are shown in the figure below:

Figure: matrix() function demonstration  

This concludes this article on five common 2D transformations implemented in CSS. For more information on CSS 2D transformations, please search 123WORDPRESS.COM’s previous articles or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<:  Introduction to installing JDK under Linux, including uninstalling OpenJDK

>>:  Some summary of html to pdf conversion cases (multiple pictures recommended)

Recommend

Detailed analysis of Vue child components and parent components

Table of contents 1. Parent components and child ...

Detailed explanation of the use principle and calculation method of the umask command under Linux

Table of contents umask Umask usage principle 1. ...

CSS implements five common 2D transformations

2D transformations in CSS allow us to perform som...

Detailed steps for building a React application with a Rails API

Table of contents Backend: Rails API part Front-e...

Vue Getting Started with Weather Forecast

This article example shares the specific code of ...

jQuery implements employee management registration page

This article example shares the specific code of ...

GZIP compression Tomcat and improve web performance process diagram

1. Introduction I recently worked on a project an...

Implementation of positioning CSS child elements relative to parent elements

Solution Add position:relative to the parent elem...

A MySQL migration plan and practical record of pitfalls

Table of contents background Solution 1: Back up ...

js to achieve waterfall flow layout (infinite loading)

This article example shares the specific code of ...

Vue3+Vite+TS implements secondary encapsulation of element-plus business components sfasga

Table of contents 1. Structure string 2. Return t...

Introduction to the role of HTML doctype

Document mode has the following two functions: 1. ...

Vue implements 3 ways to switch tabs and switch to maintain data status

3 ways to implement tab switching in Vue 1. v-sho...

A Brief Analysis of MySQL PHP Syntax

Let's first look at the basic syntax of the c...

Solution to data duplication when using limit+order by in MySql paging

Table of contents summary Problem Description Ana...