Hướng dẫn css transform-origin - nguồn gốc chuyển đổi css

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à

transform origin

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. Nói nghe có vẻ khó hiểu, ví dụ bạn sử dụng rotate() để xoay ảnh và khi dùng thêm

transform origin

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ính

transform origin

2 phải được dùng kèm với transform và có thể áp dụng cho bất kỳ hàm nào.

Thuộc tính

transform origin

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: 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%

Chuyển đổi -nguồn gốc: -30% 0%; -Moz-Transform-Origin: -30% 0%; -WebKit-Transform-Origin: -30% 0%; -o-transform-origin: -30% 0%; -ms-transform-origin: -30% 0%;	Transform-Origin: 30% 0%; -Moz-Transform-Origin: 30% 0%; -WebKit-Transform-Origin: 30% 0%; -o-transform-origin: 30% 0%; -MS-Transform-Origin: 30% 0%;	X y
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