Ví dụ về thuộc tính transform: translateX()

Thuộc tính transform với giá trị translateX()

Thuộc tính transform với giá trị translateX: Xác định một dịch chuyển 2D theo trục X.

HTML viết:

<html>
<head></head>
<body>
<p>transform</p>
</body>
</html>

CSS viết:

p {
    background: #cc0000;
    height: 50px;
    margin: 0 auto;
    width: 120px;
}

Hiển thị trình duyệt khi chưa có transform: translateX():

transform

Thêm thuộc tính transform: translateX(), CSS viết:

p {
    background: #cc0000;
    height: 50px;
    margin: 0 auto;
    width: 120px;
    transform: translateX(10px);
    -moz-transform: translateX(10px);
    -webkit-transform: translateX(10px);
    -o-transform: translateX(10px);
    -ms-transform: translateX(10px);
}

Hiển thị trình duyệt khi có transform: translateX()

transform

Giá trị translateX();

Giá trị Ví dụ Hiển thị
Bình thường transform: translateX(0px);
-moz-transform: translateX(0px);
-webkit-transform: translateX(0px);
-o-transform: translateX(0px);
-ms-transform: translateX(0px);

transform
translateX(x) transform: translateX(20px);
-moz-transform: translateX(20px);
-webkit-transform: translateX(20px);
-o-transform: translateX(20px);
-ms-transform: translateX(20px);

transform
transform: translateX(10px);
-moz-transform: translateX(10px);
-webkit-transform: translateX(10px);
-o-transform: translateX(10px);
-ms-transform: translateX(10px);

transform
transform: translateX(0px);
-moz-transform: translateX(0px);
-webkit-transform: translateX(0px);
-o-transform: translateX(0px);
-ms-transform: translateX(0px);

transform
transform: translateX(-10px);
-moz-transform: translateX(-10px);
-webkit-transform: translateX(-10px);
-o-transform: translateX(-10px);
-ms-transform: translateX(-10px);

transform
transform: translateX(-20px);
-moz-transform: translateX(-20px);
-webkit-transform: translateX(-20px);
-o-transform: translateX(-20px);
-ms-transform: translateX(-20px);

transform