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

7 Ways to Write a Vue v-for Loop

Table of contents 1. Always use key in v-for loop...

Detailed example of using if statement in mysql stored procedure

This article uses an example to illustrate the us...

Zen HTML Elements Friends who use zen coding can collect it

html ¶ <html></html> html:xml ¶ <h...

How to build docker+jenkins+node.js automated deployment environment from scratch

This case is based on CentOS 7 system Suitable fo...

How to implement Docker Registry to build a private image warehouse

The image of the microservice will be uploaded to...

Example code of how to implement pivot table in MySQL/MariaDB

The previous article introduced several methods f...

Parameters to make iframe transparent

<iframe src="./ads_top_tian.html" all...

Detailed steps for Linux account file control management

In the Linux system, in addition to various accou...

Example code for implementing a hollow mask layer with CSS

Contents of this article: Page hollow mask layer,...

Teach you how to quickly enable self-monitoring of Apache SkyWalking

1. Enable Prometheus telemetry data By default, t...

Solution to the problem that mysql cannot start after modifying the default path of the database

Preface When mysql modified the default database ...

Summary of MySQL usage specifications

1. InnoDB storage engine must be used It has bett...

mysql solves time zone related problems

Preface: When using MySQL, you may encounter time...

A Deep Dive into the MySQL InnoDB Storage Engine

Preface In MySQL, InnoDB belongs to the storage e...

Linux CentOS MySQL database installation and configuration tutorial

Notes on installing MySQL database, share with ev...