Các transformbất động sản cho phép bạn thao tác trực quan một phần tử bằng cách làm lệch, xoay, dịch, hoặc mở rộng quy mô:
.element ( width: 20px; height: 20px; transform: scale(20); )Ngay cả với chiều cao và chiều rộng đã khai báo, phần tử này bây giờ sẽ được thu nhỏ thành hai mươi lần kích thước ban đầu của nó:
Xem giải thích về Biến đổi bút bằng CSS-Tricks (@ css-trick) trên CodePen.
Cung cấp cho hàm này hai giá trị sẽ kéo dài nó theo chiều ngang của giá trị thứ nhất và theo chiều dọc của giá trị thứ hai. Trong ví dụ bên dưới, phần tử bây giờ sẽ có chiều rộng gấp đôi nhưng bằng một nửa chiều cao của phần tử ban đầu:
.element ( transform: scale(2, .5); )Hoặc bạn có thể cụ thể hơn mà không cần sử dụng hàm viết tắt:
transform: scaleX(2); transform: scaleY(.5);Nhưng scale()chỉ là một trong nhiều hàm biến đổi có sẵn:
Giá trị
scale(): Ảnh hưởng đến kích thước của phần tử. Điều này cũng áp dụng chofont-size,padding,height, vàwidthcủa một phần tử, quá. Nó cũng là một hàm viết tắt cho các hàmscaleXvàscaleY.skewX()vàskewY(): Nghiêng một phần tử sang trái hoặc phải, giống như biến hình chữ nhật thành hình bình hành.skew()là cách viết tắt kết hợpskewX()vàskewYbằng cách chấp nhận cả hai giá trị.translate(): Di chuyển một phần tử sang ngang hoặc lên và xuống.rotate(): Xoay phần tử theo chiều kim đồng hồ từ vị trí hiện tại của nó.matrix(): Một hàm có lẽ không được dùng để viết bằng tay, nhưng kết hợp tất cả các phép biến đổi thành một.perspective(): Không ảnh hưởng đến bản thân phần tử, nhưng ảnh hưởng đến các biến đổi 3D của các phần tử con, cho phép tất cả chúng có góc nhìn chiều sâu nhất quán.
Nghiêng
/* Skew points along the x-axis */ .element ( transform: skewX(25deg); ) /* Skew point along the y-axis */ .element ( transform: skewY(25deg); ) /* Skew points along the x- and y-axis */ .element ( transform: skew(25deg, 25deg); )Các hàm skewXvà skewYbiến đổi nghiêng một phần tử theo cách này hay cách khác. Hãy nhớ rằng: không có thuộc tính viết tắt để làm lệch một phần tử, vì vậy bạn sẽ cần sử dụng cả hai hàm. Trong ví dụ dưới đây, chúng ta có thể xiên một hình vuông 100px x 100px sang trái và phải bằng skewX:
Xem giải thích về Biến đổi bút bằng CSS-Tricks (@ css-trick) trên CodePen.
Trong ví dụ này, chúng ta có thể xiên một phần tử theo chiều dọc với skewY:
Xem giải thích về Biến đổi bút bằng CSS-Tricks (@ css-trick) trên CodePen.
Bây giờ hãy sử dụng skew()để kết hợp cả hai:
Xem thuộc
tính viết tắt Pen xiên () của CSS-Tricks (@ css-trick)
trên CodePen.
Quay
.element ( transform: rotate(25deg); )Điều này sẽ xoay một phần tử theo chiều kim đồng hồ từ vị trí ban đầu của nó, trong khi một giá trị âm sẽ xoay nó theo hướng ngược lại. Dưới đây là một ví dụ hoạt hình đơn giản trong đó một hình vuông tiếp tục xoay 360 độ sau mỗi ba giây:
Xem giải thích về Biến đổi bút bằng CSS-Tricks (@ css-trick) trên CodePen.
Chúng tôi cũng có thể sử dụng rotateX, rotateYvà rotateZcác chức năng, như vậy:
Xem giải thích về Biến đổi bút bằng CSS-Tricks (@ css-trick) trên CodePen.
Phiên dịch
.element ( transform: translate(20px, 10px); )Hàm biến đổi này di chuyển một phần tử sang ngang hoặc lên và xuống. Tại sao không chỉ sử dụng trên / trái / dưới / phải? Chà, đôi khi hơi khó hiểu. Tôi nghĩ về những thứ đó như bố cục / định vị (dù sao thì chúng cũng có hỗ trợ trình duyệt tốt hơn) và đây là một cách để di chuyển những thứ đó xung quanh như một phần của quá trình chuyển đổi hoặc hoạt ảnh.
Các giá trị này sẽ là bất kỳ giá trị độ dài nào, như 10px hoặc 2,4em. Một giá trị sẽ di chuyển phần tử sang bên phải (các giá trị âm ở bên trái). Nếu giá trị thứ hai được cung cấp, giá trị thứ hai đó sẽ di chuyển nó xuống (giá trị âm lên). Hoặc, bạn có thể nhận được cụ thể:
transform: translateX(value); transform: translateY(value);Điều quan trọng cần lưu ý là một phần tử sử dụng transformsẽ không làm cho các phần tử khác chạy xung quanh nó. Bằng cách sử dụng translatehàm bên dưới và di chuyển hình vuông màu xanh lá cây ra khỏi vị trí ban đầu của nó, chúng tôi sẽ nhận thấy cách văn bản xung quanh sẽ vẫn cố định tại chỗ, như thể hình vuông là một phần tử khối:
Xem giải thích về Biến đổi bút bằng CSS-Tricks (@ css-trick) trên CodePen.
Cũng cần lưu ý rằng translatephần cứng sẽ được tăng tốc nếu bạn muốn tạo hiệu ứng cho thuộc tính đó, không giống như position: absolute.
Nhiều giá trị
Với danh sách được phân tách bằng dấu cách, bạn có thể thêm nhiều giá trị vào thuộc transformtính:
.element ( width: 20px; height: 20px; transform: scale(20) skew(-20deg); )Cần lưu ý rằng có một thứ tự mà các phép biến đổi này sẽ được thực hiện, trong ví dụ trên, `` xiên '' sẽ được thực hiện đầu tiên và sau đó phần tử sẽ được chia tỷ lệ.
Ma trận
Hàm matrixbiến đổi có thể được sử dụng để kết hợp tất cả các phép biến đổi thành một. Nó hơi giống như chuyển đổi tốc ký, chỉ có điều tôi không tin rằng nó thực sự được viết bằng tay. Có những công cụ như The Matrix Resolutions, có thể chuyển một nhóm các phép biến đổi thành một khai báo ma trận duy nhất. Có lẽ trong một số tình huống, điều này có thể làm giảm kích thước tệp, mặc dù những tối ưu hóa vi mô không thân thiện với tác giả như vậy có thể không đáng để bạn dành thời gian.
Đối với những người tò mò, điều này:
rotate(45deg) translate(24px, 25px)cũng có thể được biểu diễn dưới dạng:
matrix(0.7071067811865475, 0.7071067811865476, -0.7071067811865476, 0.7071067811865475, -0.7071067811865497, 34.648232278140824)Chuyển đổi 3D
Hầu hết các thuộc tính trên đều có phiên bản 3D của chúng.
translate3d(x, y, z) translateZ(z)Giá trị thứ ba trong translate3dhoặc giá trị trong translateZdi chuyển phần tử về phía người xem, các giá trị âm ra xa.
scale3d(sx, sy, sz) scaleZ(sz)Giá trị thứ ba trong scale3dhoặc giá trị trong scaleZảnh hưởng đến tỷ lệ dọc theo trục z (ví dụ: đường tưởng tượng đi thẳng ra khỏi màn hình).
rotateX(value) rotateY(value) rotate3d(x, y, z)rotateXvà rotateYsẽ xoay một phần tử trong không gian 3D xung quanh các trục đó. rotate3dcho phép bạn chỉ định một điểm trong không gian 3D để xoay phần tử xung quanh.
matrix3d(… )Một cách để mô tả một cách lập trình sự biến đổi 3D trong lưới 4 × 4. Không ai sẽ viết tay một trong những điều này, bao giờ.
perspective(value)Giá trị này không ảnh hưởng đến bản thân phần tử, nhưng nó ảnh hưởng đến các phép biến đổi 3D của các phần tử con, cho phép tất cả chúng có góc nhìn chiều sâu nhất quán.
Thêm thông tin
- Tài liệu MDN về chuyển đổi và sử dụng.
- Tài liệu của David DeSandro về chuyển đổi 3D
- Surfin 'Safari: Biến đổi 3D
- Thông số kỹ thuật W3C về chuyển đổi CSS3
- Giới thiệu về các chuyển đổi 3D CSS
Hỗ trợ trình duyệt
Chuyển đổi 2D
| Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
|---|---|---|---|---|---|---|
| Bất kì | 3.1+ | 3,5+ | 10,5+ | 9+ | 4.1+ | Ít nhất 4 |
Chuyển đổi 3D
| Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
|---|---|---|---|---|---|---|
| 10+ | 4+ | 12+ | không ai | 10+ | 4.1+ | 5+ |
Tiền tố nhà cung cấp
.element ( -webkit-transform: value; -moz-transform: value; -ms-transform: value; -o-transform: value; transform: value; )