Home > Article > Web Front-end > How to implement translation transformation in css

How to implement translation transformation in css

WBOYOriginal: 2021-12-08 10:20:524721browse

In css, the transform attribute can be used to realize the translation transformation of the element. This attribute can move the element. When the value of the attribute is "translate(x,y)", the element can be translated. Syntax "Element {transform:translate(horizontal movement value, vertical movement value);}".

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

How to implement translation transformation in css

In css, you can use the transform attribute to set the translation transformation of an element. The function of this attribute is to Elements have 2D or 3D transformations applied to them. This property allows us to rotate, scale, move or tilt the element.

When the attribute value is set to translate(x,y), the element can be translated. The example is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width:50px;
            height:50px;
            border:1px solid #000;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Output result:

How to implement translation transformation in css

When adding the "transform:translate(100px,200px);" style to an element, the output result is as follows:

How to implement translation transformation in css

(Learning video sharing: css Video tutorial)

The above is the detailed content of How to implement translation transformation in css. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use css to change the picture effect when the mouse slides over itNext article：How to use css to change the picture effect when the mouse slides over it

See more

How to implement translation transformation in css

Related articles