Ngoài thuộc tính transition
của CSS3 giúp bạn tạo ra các hiệu ứng chuyển động của các phần tử trong website, thì nó còn một thuộc tính khác được sử dụng kèm với transition
rất thường xuyên đó là thuộc tính transform
có chức năng đổi hình dạng các phần tử block trong website.
Thay đổi hình dạng với transform
Với transform, bạn có thể xoay, co giãn kích thước hoặc bóp nghiêng hình dạng một phần tử. Ngoài ra nó cũng còn một số tính năng khác cũng liên quan đến việc làm thay đổi hình dạng.
Cách viết:
transform: function[ value ];
-moz-transform: function[ value ];
-webkit-transform: function[ value ];
Trong đó, function[]
là tên hàm làm thay đổi hình dạng và value là giá trị của hàm, mỗi hàm có thể sẽ có cách viết giá trị khác nhau.
Về các hàm làm thay đổi hình dạng cho transform thì có rất nhiều nhưng mình chỉ nói qua một số hàm đơn giản thường dùng nhất.
Các hàm chuyển động của transform
Xoay – rotate[]
Với hàm rotate[]
bạn có thể thiết lập một đối tượng bị xoay theo độ góc. Ở hàm này bạn có thể thiết lập giá trị kiểu
transform-origin: 100% 50%;1 [thiết lập giá trị góc, tức là độ] hoặc
transform-origin: 100% 50%;2 [1 turn = 360 độ]. Bạn hãy xem ví dụ live dưới đây để hiểu hơn.
[codepen id=”Eaqvpg”]
Co giãn – transform-origin: 100% 50%;
3
Với hàm
transform-origin: 100% 50%;3 bạn có thể thiết lập co giãn kích thước của một phần tử dựa vào trục y [trục thẳng đứng] và trục x [trục ngang], và hàm này bạn sẽ thiết lập là
transform-origin: 100% 50%;5 hoặc s
transform-origin: 100% 50%;6 và
transform-origin: 100% 50%;7.
[codepen id=”bNXrOZ”]
Kéo nghiêng – skew[]
Bạn có thể kéo một đối tượng nghiêng dựa theo trục Y và trục X với hàm
transform-origin: 100% 50%;8 và
transform-origin: 100% 50%;9, giá trị bên trong là số
transform-origin: 100% 50%;1 tương tự
rotate[]
.[codepen id=”qEeXvX”]
Tùy chỉnh tâm hình dạng với transform-origin
Một thuộc tính thú vị nữa mà bạn có thể dùng kèm theo transform đó là
2, nó sẽ cho phép bạn dịch chuyển phần tử dựa vào kiểu thay đổi hình dạng ởtransform origin
transform
. Nói nghe có vẻ khó hiểu, ví dụ bạn sử dụng rotate[]
để xoay ảnh và khi dùng thêm 2 thì nó sẽ cho phép bạn chỉnh độ lớn của vòng xoay tính từ tâm phần tử. Thuộc tínhtransform origin
2 phải được dùng kèm vớitransform origin
transform
và có thể áp dụng cho bất kỳ hàm nào.Thuộc tính
2 có hai giá trị là X [phương thẳng đứng] và Y [phương nằm ngang] và giá trị nó sẽ dựa vào kích thước của phần tử.transform origin
transform-origin: 100% 50%;
[codepen id=”gbVGYQ”]
Lời kết
Bây giờ bạn đã thấy CSS thực sự thú vị chưa nào? Nhưng nhiêu đó vẫn chưa hết đâu vì CSS3 còn làm được nhiều cái rất hay nữa, thậm chí nó có thể làm chuyển động 3D hoặc vẽ các khối hình học rất hay. Tuy nhiên ở serie CSS cơ bản này, mình sẽ dừng lại ở transform vì bấy nhiêu đó đã quá đủ cho các kiến thức CSS cơ bản rồi. Những tính năng nâng cao hơn mình sẽ hướng dẫn ở serie CSS nâng cao.
Transform-Origin: Trung tâm bên trái; -Moz-Transform-Origin: Trung tâm bên trái; -WebKit-Transform-Origin: Trung tâm bên trái; -o-transform-origin: trung tâm bên trái; -MS-Transform-Origin: Trung tâm bên trái;
Transform-Origin: Trung tâm; -Moz-Transform-Origin: Trung tâm trung tâm; -WebKit-Transform-Origin: Trung tâm Trung tâm; -o-transform-origin: Trung tâm trung tâm; -MS-Transform-Origin: Trung tâm trung tâm;
X Y
- Trung tâm X.
- Transform-Origin: Trung tâm bên trái; -Moz-Transform-Origin: Trung tâm bên trái; -WebKit-Transform-Origin: Trung tâm bên trái; -o-transform-origin: trung tâm bên trái; -MS-Transform-Origin: Trung tâm bên trái;
- Transform-Origin: Trung tâm; -Moz-Transform-Origin: Trung tâm trung tâm; -WebKit-Transform-Origin: Trung tâm Trung tâm; -o-transform-origin: Trung tâm trung tâm; -MS-Transform-Origin: Trung tâm trung tâm;
- CSS3
- Transform-Origin: Trung tâm bên phải; -Moz-Transform-Origin: trung tâm bên phải; -WebKit-Transform-Origin: trung tâm bên phải; -o-transform-origin: trung tâm bên phải; -ms-transform-origin: trung tâm bên phải;
X đáy
Transform-Origin: Dưới cùng bên trái; -Moz-Transform-Origin: dưới cùng bên trái; -WebKit-Transform-Origin: BOTTOM bên trái; -o-transform-origin: dưới cùng bên trái; -ms-transform-origin: dưới cùng bên trái;
Transform-Origin: Trung tâm dưới cùng; -Moz-Transform-Origin: Trung tâm dưới cùng; -WebKit-Transform-Origin: Trung tâm dưới cùng; -o-transform-origin: đáy trung tâm; -ms-transform-origin: đáy trung tâm;
transform origin
0% y
div.originWrap { border: 1px solid #0000cc; height: 200px; width: 200px; } div.origin { background: #cc0000; height: 100px; width: 100px; transform: rotate[45deg]; -moz-transform: rotate[45deg]; -webkit-transform: rotate[45deg]; -o-transform: rotate[45deg]; -ms-transform: rotate[45deg]; }
Transform -Origin: 0% -30%; -Moz-Transform-Origin: 0% -30%; -WebKit-Transform-Origin: 0% -30%; -o-transform-origin: 0% -30%; -ms-transform-origin: 0% -30%;
Transform-Origin: 0% 0%; -Moz-Transform-Origin: 0% 0%; -WebKit-Transform-Origin: 0% 0%; -o-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%;
div.originWrap { border: 1px solid #0000cc; height: 200px; width: 200px; } div.origin { background: #cc0000; height: 100px; width: 100px; transform: rotate[45deg]; transform-origin: left center; -moz-transform: rotate[45deg]; -moz-transform-origin: left center; -webkit-transform: rotate[45deg]; -webkit-transform-origin: left center; -o-transform: rotate[45deg]; -o-transform-origin: left center; -ms-transform: rotate[45deg]; -ms-transform-origin: left center; }
Transform-Origin: 0% 30%; -Moz-Transform-Origin: 0% 30%; -WebKit-Transform-Origin: 0% 30%; -o-transform-origin: 0% 30%; -MS-Transform-Origin: 0% 30%;
X 0%
Transform -Origin: -30% -30%; -Moz -Transform -Origin: -30% -30%; -WebKit -Transform -Origin: -30% -30%; -o -transform -origin: -30% -30%; -MS -Transform -Forigin: -30% -30%; | Transform-Origin: Trung tâm; -Moz-Transform-Origin: Trung tâm trung tâm; -WebKit-Transform-Origin: Trung tâm Trung tâm; -o-transform-origin: Trung tâm trung tâm; -MS-Transform-Origin: Trung tâm trung tâm; -moz-transform-origin: center center; -webkit-transform-origin: center center; -o-transform-origin: center center; -ms-transform-origin: center center; | biến đổi |
Transform-Origin: Trung tâm bên phải; -Moz-Transform-Origin: trung tâm bên phải; -WebKit-Transform-Origin: trung tâm bên phải; -o-transform-origin: trung tâm bên phải; -ms-transform-origin: trung tâm bên phải; | Transform-Origin: Đầu trái; -Moz-Transform-Origin: Đầu trái; -WebKit-Transform-Origin: Đầu trái; -o-transform-origin: đầu trái; -MS-Transform-Origin: Đầu trái; -moz-transform-origin: left top; -webkit-transform-origin: left top; -o-transform-origin: left top; -ms-transform-origin: left top; | biến đổi |
Transform-Origin: Trung tâm bên trái; -Moz-Transform-Origin: Trung tâm bên trái; -WebKit-Transform-Origin: Trung tâm bên trái; -o-transform-origin: trung tâm bên trái; -MS-Transform-Origin: Trung tâm bên trái; -moz-transform-origin: left center; -webkit-transform-origin: left center; -o-transform-origin: left center; -ms-transform-origin: left center; | biến đổi | |
Transform-Origin: Dưới cùng bên trái; -Moz-Transform-Origin: dưới cùng bên trái; -WebKit-Transform-Origin: BOTTOM bên trái; -o-transform-origin: dưới cùng bên trái; -ms-transform-origin: dưới cùng bên trái; -moz-transform-origin: left bottom; -webkit-transform-origin: left bottom; -o-transform-origin: left bottom; -ms-transform-origin: left bottom; | biến đổi | |
Transform-Origin: Trung tâm dưới cùng; -Moz-Transform-Origin: Trung tâm dưới cùng; -WebKit-Transform-Origin: Trung tâm dưới cùng; -o-transform-origin: đáy trung tâm; -ms-transform-origin: đáy trung tâm; | Transform-Origin: Trung tâm hàng đầu; -Moz-Transform-Origin: Trung tâm hàng đầu; -WebKit-Transform-Origin: Trung tâm hàng đầu; -o-transform-origin: trung tâm hàng đầu; -MS-Transform-Origin: Trung tâm hàng đầu; -moz-transform-origin: center top; -webkit-transform-origin: center top; -o-transform-origin: center top; -ms-transform-origin: center top; | biến đổi |
Transform-Origin: Trung tâm; -Moz-Transform-Origin: Trung tâm trung tâm; -WebKit-Transform-Origin: Trung tâm Trung tâm; -o-transform-origin: Trung tâm trung tâm; -MS-Transform-Origin: Trung tâm trung tâm; -moz-transform-origin: center center; -webkit-transform-origin: center center; -o-transform-origin: center center; -ms-transform-origin: center center; | biến đổi | |
Transform-Origin: Trung tâm dưới cùng; -Moz-Transform-Origin: Trung tâm dưới cùng; -WebKit-Transform-Origin: Trung tâm dưới cùng; -o-transform-origin: đáy trung tâm; -ms-transform-origin: đáy trung tâm; -moz-transform-origin: center bottom; -webkit-transform-origin: center bottom; -o-transform-origin: center bottom; -ms-transform-origin: center bottom; | biến đổi | |
đúng y | Transform-Origin: Top bên phải; -Moz-Transform-Origin: Đóng đúng; -WebKit-Transform-Origin: Đóng đúng; -o-transform-origin: top bên phải; -ms-transform-origin: top bên phải; -moz-transform-origin: right top; -webkit-transform-origin: right top; -o-transform-origin: right top; -ms-transform-origin: right top; | biến đổi |
Transform-Origin: Trung tâm bên phải; -Moz-Transform-Origin: trung tâm bên phải; -WebKit-Transform-Origin: trung tâm bên phải; -o-transform-origin: trung tâm bên phải; -ms-transform-origin: trung tâm bên phải; -moz-transform-origin: right center; -webkit-transform-origin: right center; -o-transform-origin: right center; -ms-transform-origin: right center; | biến đổi | |
Transform-Origin: dưới cùng bên phải; -Moz-Transform-Origin: dưới cùng bên phải; -WebKit-Transform-Origin: dưới cùng bên phải; -o-transform-origin: dưới cùng bên phải; -ms-transform-origin: dưới cùng bên phải; -moz-transform-origin: right bottom; -webkit-transform-origin: right bottom; -o-transform-origin: right bottom; -ms-transform-origin: right bottom; | biến đổi | |
X TOP | Transform-Origin: Đầu trái; -Moz-Transform-Origin: Đầu trái; -WebKit-Transform-Origin: Đầu trái; -o-transform-origin: đầu trái; -MS-Transform-Origin: Đầu trái; -moz-transform-origin: left top; -webkit-transform-origin: left top; -o-transform-origin: left top; -ms-transform-origin: left top; | biến đổi |
Transform-Origin: Trung tâm hàng đầu; -Moz-Transform-Origin: Trung tâm hàng đầu; -WebKit-Transform-Origin: Trung tâm hàng đầu; -o-transform-origin: trung tâm hàng đầu; -MS-Transform-Origin: Trung tâm hàng đầu; -moz-transform-origin: center top; -webkit-transform-origin: center top; -o-transform-origin: center top; -ms-transform-origin: center top; | biến đổi | |
Transform-Origin: Top bên phải; -Moz-Transform-Origin: Đóng đúng; -WebKit-Transform-Origin: Đóng đúng; -o-transform-origin: top bên phải; -ms-transform-origin: top bên phải; -moz-transform-origin: right top; -webkit-transform-origin: right top; -o-transform-origin: right top; -ms-transform-origin: right top; | biến đổi | |
Transform-Origin: Trung tâm bên phải; -Moz-Transform-Origin: trung tâm bên phải; -WebKit-Transform-Origin: trung tâm bên phải; -o-transform-origin: trung tâm bên phải; -ms-transform-origin: trung tâm bên phải; | Transform-Origin: dưới cùng bên phải; -Moz-Transform-Origin: dưới cùng bên phải; -WebKit-Transform-Origin: dưới cùng bên phải; -o-transform-origin: dưới cùng bên phải; -ms-transform-origin: dưới cùng bên phải; -moz-transform-origin: left center; -webkit-transform-origin: left center; -o-transform-origin: left center; -ms-transform-origin: left center; | biến đổi |
Transform-Origin: Trung tâm; -Moz-Transform-Origin: Trung tâm trung tâm; -WebKit-Transform-Origin: Trung tâm Trung tâm; -o-transform-origin: Trung tâm trung tâm; -MS-Transform-Origin: Trung tâm trung tâm; -moz-transform-origin: center center; -webkit-transform-origin: center center; -o-transform-origin: center center; -ms-transform-origin: center center; | biến đổi | |
Transform-Origin: Trung tâm bên phải; -Moz-Transform-Origin: trung tâm bên phải; -WebKit-Transform-Origin: trung tâm bên phải; -o-transform-origin: trung tâm bên phải; -ms-transform-origin: trung tâm bên phải; -moz-transform-origin: right center; -webkit-transform-origin: right center; -o-transform-origin: right center; -ms-transform-origin: right center; | biến đổi | |
Transform-Origin: dưới cùng bên phải; -Moz-Transform-Origin: dưới cùng bên phải; -WebKit-Transform-Origin: dưới cùng bên phải; -o-transform-origin: dưới cùng bên phải; -ms-transform-origin: dưới cùng bên phải; | X TOP -moz-transform-origin: left bottom; -webkit-transform-origin: left bottom; -o-transform-origin: left bottom; -ms-transform-origin: left bottom; | biến đổi |
Transform-Origin: Trung tâm dưới cùng; -Moz-Transform-Origin: Trung tâm dưới cùng; -WebKit-Transform-Origin: Trung tâm dưới cùng; -o-transform-origin: đáy trung tâm; -ms-transform-origin: đáy trung tâm; -moz-transform-origin: center bottom; -webkit-transform-origin: center bottom; -o-transform-origin: center bottom; -ms-transform-origin: center bottom; | biến đổi | |
Transform-Origin: dưới cùng bên phải; -Moz-Transform-Origin: dưới cùng bên phải; -WebKit-Transform-Origin: dưới cùng bên phải; -o-transform-origin: dưới cùng bên phải; -ms-transform-origin: dưới cùng bên phải; -moz-transform-origin: right bottom; -webkit-transform-origin: right bottom; -o-transform-origin: right bottom; -ms-transform-origin: right bottom; | biến đổi | |
X TOP | Transform-Origin: Đầu trái; -Moz-Transform-Origin: Đầu trái; -WebKit-Transform-Origin: Đầu trái; -o-transform-origin: đầu trái; -MS-Transform-Origin: Đầu trái; -moz-transform-origin: 0% -30%; -webkit-transform-origin: 0% -30%; -o-transform-origin: 0% -30%; -ms-transform-origin: 0% -30%; | biến đổi |
Transform-Origin: Trung tâm hàng đầu; -Moz-Transform-Origin: Trung tâm hàng đầu; -WebKit-Transform-Origin: Trung tâm hàng đầu; -o-transform-origin: trung tâm hàng đầu; -MS-Transform-Origin: Trung tâm hàng đầu; -moz-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; | biến đổi | |
Trung tâm X. -moz-transform-origin: 0% 30%; -webkit-transform-origin: 0% 30%; -o-transform-origin: 0% 30%; -ms-transform-origin: 0% 30%; | biến đổi | |
Transform-Origin: Trung tâm bên trái; -Moz-Transform-Origin: Trung tâm bên trái; -WebKit-Transform-Origin: Trung tâm bên trái; -o-transform-origin: trung tâm bên trái; -MS-Transform-Origin: Trung tâm bên trái; | X đáy -moz-transform-origin: -30% 0%; -webkit-transform-origin: -30% 0%; -o-transform-origin: -30% 0%; -ms-transform-origin: -30% 0%; | biến đổi |
Transform-Origin: Trung tâm hàng đầu; -Moz-Transform-Origin: Trung tâm hàng đầu; -WebKit-Transform-Origin: Trung tâm hàng đầu; -o-transform-origin: trung tâm hàng đầu; -MS-Transform-Origin: Trung tâm hàng đầu; -moz-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; | biến đổi | |
Trung tâm X. -moz-transform-origin: 30% 0%; -webkit-transform-origin: 30% 0%; -o-transform-origin: 30% 0%; -ms-transform-origin: 30% 0%; | biến đổi | |
Transform-Origin: Trung tâm bên trái; -Moz-Transform-Origin: Trung tâm bên trái; -WebKit-Transform-Origin: Trung tâm bên trái; -o-transform-origin: trung tâm bên trái; -MS-Transform-Origin: Trung tâm bên trái; | X đáy -moz-transform-origin: -30% -30%; -webkit-transform-origin: -30% -30%; -o-transform-origin: -30% -30%; -ms-transform-origin: -30% -30%; | biến đổi |
Transform-Origin: Trung tâm hàng đầu; -Moz-Transform-Origin: Trung tâm hàng đầu; -WebKit-Transform-Origin: Trung tâm hàng đầu; -o-transform-origin: trung tâm hàng đầu; -MS-Transform-Origin: Trung tâm hàng đầu; -moz-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; | biến đổi | |
Trung tâm X. -moz-transform-origin: 30% 30%; -webkit-transform-origin: 30% 30%; -o-transform-origin: 30% 30%; -ms-transform-origin: 30% 30%; | biến đổi |