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