Home >Web Front-end >CSS Tutorial >What does css3 offset to the left look like?
What does css3 offset to the left look like?
- WBOYOriginal
- 2021-12-22 11:47:456694browse
In CSS, the style of left offset is "transform:translate(-left offset distance value);"; the transform attribute allows us to rotate, scale, move or tilt the element Operation, the function of translate() function is to define the translation transformation of elements.
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
What does css3 left offset look like?
In css, if you want to achieve an element offset to the left, you need to use the transform attribute and translate() function.
The transform property applies a 2D or 3D transformation to an element. This property allows us to rotate, scale, move or tilt the element.
The function of the translate() function is to define the translation transformation of the element.
The specific style of element offset to the left is as follows:
transform:translate(-向左偏移距离值)
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{
margin:0 auto;
width:50px;
height:50px;
border:1px solid #000;
transform:translate(-100px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of What does css3 offset to the left look like?. For more information, please follow other related articles on the PHP Chinese website!