Home > Web Front-end > CSS Tutorial > What does css3 offset to the left look like?

What does css3 offset to the left look like?

WBOY
Release: 2021-12-22 11:47:45
Original
6697 people have browsed it

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.

What does css3 offset to the left look like?

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(-向左偏移距离值)
Copy after login

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>
Copy after login

Output result:

What does css3 offset to the left look like?

(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!

Related labels:
css
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template