Hướng dẫn transform trong css

Posted on by mtoplistChuyên mục:Top List

  • Trang chủ
  • Tham khảo
  • CSS
  • CSS3
  • Thuộc tính transform

Nội dung chính

Show

  • Định nghĩa và sử dụng
  • Thuộc tính của transform trong css3:

Định nghĩa và sử dụng

Thuộc
tính transform xác định một chuyển đổi 2 chiều, 3 chiều, có thể là xoay, tỷ lệ, di chuyển, nghiêng, …

Thuộc tính của transform trong css3:

Thuộc tínhgiá trịTrình duyệtMô tảtransform
none

  • Hướng dẫn transform trong css
  • Hướng dẫn transform trong css
  • Hướng dẫn transform trong css
  • Hướng dẫn transform trong css
  • Hướng dẫn transform trong css

Xác định rằng không có chuyển đổi
matrix(n,n,n,n,n,n)
Định nghĩa một biến đổi 2D, bằng cách sử dụng một ma trận với 6 giá trị

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

Định nghĩa một biến đổi 3D, bằng cách sử dụng một ma trận 4×4 với 16 giá trị

perspective(n)

Định nghĩa một biến đổi 3D dưới dạng phối cảnh.
rotate(góc)
Định nghĩa một phép quay 2D với góc được xác định bởi tham số.
rotate3d(x,y,z,angle)
Định nghĩa một phép quay 3D được xác định bởi các tham số.
rotateX(angle)
Định nghĩa một phép quay 3D dọc theo trục X.
rotateY(angle)
Định nghĩa một phép quay 3D dọc theo trục Y.
rotateZ(angle)
Định nghĩa một phép quay 3D dọc theo trục Z.
scale(x,y)
Xác định một biến đổi tỷ lệ, 2D.
scale3d(x,y,z)
Xác định một biến đổi tỷ lệ, 3D.
scaleX(x)
Xác định một biến đổi tỷ lệ theo trục X.
scaleY(y)
Xác định một biến đổi tỷ lệ theo trục Y.
scaleZ(z)
Xác định một biến đổi tỷ lệ theo trục Z.
skew(x-angle,y-angle)
Xác định sự biến đổi nghiêng 2D dọc theo trục X và Y.
skewX(angle)
Xác định sự biến đổi nghiêng 2D dọc theo trục X.
skewY(angle)
Xác định sự biến đổi nghiêng 2D dọc theo trục Y.
translate(x,y)
Xác định một dịch chuyển 2D.
translate3d(x,y,z)
Xác định một dịch chuyển 3D.
translateX(x)
Xác định một dịch chuyển 2D theo trục X.
translateY(y)
Xác định một dịch chuyển 2D theo trục Y.
translateZ(z)
Xác định một dịch chuyển 2D theo trục Z.
transform-origin
Giá trị trục X

  • Hướng dẫn transform trong css
  • Hướng dẫn transform trong css
  • Hướng dẫn transform trong css
  • Hướng dẫn transform trong css
  • Hướng dẫn transform trong css

Xác định nơi nhìn thấy được đặt tại trục X, giá trị có thể: left, right, center, chiều dài, %.
Giá trị trục Y
Xác định nơi nhìn thấy được đặt tại trục Y, giá trị có thể: left, right, center, chiều dài, %.
Giá trị trục Z
Xác định nơi nhìn thấy được đặt tại trục Z, giá trị có thể: chiều dài.
transform-style
preserve-3d

  • Hướng dẫn transform trong css
  • Hướng dẫn transform trong css
  • Hướng dẫn transform trong css
  • Hướng dẫn transform trong css
  • Hướng dẫn transform trong css

Các thành phần bên trong sẽ giữ vị trí 3D của nó.
flat
Các thành phần bên trong sẽ không giữ vị trí 3D của nó.

Ví dụ

HTML viết:

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

CSS viết:

p {
    background: #cc0000;
    height: 50px;
    width: 80px;
}

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

Thêm thuộc tính transform vào CSS:

p {
    background: #cc0000;
    height: 50px;
    width: 80px;
    transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
}

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

mtoplist