Hướng dẫn translate x trong css

  • Trang chủ
  • Tham khảo
  • CSS
  • CSS3
  • Ví dụ về thuộc tính transform: translate()

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

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

HTML viết:




transform

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: translate():

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

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

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

Giá trị translate();

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

transform

translate(0,y) transform: translate(0px,20px);
-moz-transform: translate(0px,20px);
-webkit-transform: translate(0px,20px);
-o-transform: translate(0px,20px);
-ms-transform: translate(0px,20px);

transform

transform: translate(0px,10px);
-moz-transform: translate(0px,10px);
-webkit-transform: translate(0px,10px);
-o-transform: translate(0px,10px);
-ms-transform: translate(0px,10px);

transform

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

transform

transform: translate(0px,-10px);
-moz-transform: translate(0px,-10px);
-webkit-transform: translate(0px,-10px);
-o-transform: translate(0px,-10px);
-ms-transform: translate(0px,-10px);

transform

transform: translate(0px,-20px);
-moz-transform: translate(0px,-20px);
-webkit-transform: translate(0px,-20px);
-o-transform: translate(0px,-20px);
-ms-transform: translate(0px,-20px);

transform

translate(x,0) transform: translate(20px,0px);
-moz-transform: translate(20px,0px);
-webkit-transform: translate(20px,0px);
-o-transform: translate(20px,0px);
-ms-transform: translate(20px,0px);

transform

transform: translate(10px,0px);
-moz-transform: translate(10px,0px);
-webkit-transform: translate(10px,0px);
-o-transform: translate(10px,0px);
-ms-transform: translate(10px,0px);

transform

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

transform

transform: translate(-10px,0px);
-moz-transform: translate(-10px,0px);
-webkit-transform: translate(-10px,0px);
-o-transform: translate(-10px,0px);
-ms-transform: translate(-10px,0px);

transform

transform: translate(-20px,0px);
-moz-transform: translate(-20px,0px);
-webkit-transform: translate(-20px,0px);
-o-transform: translate(-20px,0px);
-ms-transform: translate(-20px,0px);

transform

translate(x,y) transform: translate(20px,20px);
-moz-transform: translate(20px,20px);
-webkit-transform: translate(20px,20px);
-o-transform: translate(20px,20px);
-ms-transform: translate(20px,20px);

transform

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

transform

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

transform

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

transform

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

transform