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:
When adding the "transform:translate(100px,200px);" style to an element, the output result is as follows:
(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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
