Phương thức scale() tăng tỷ lệ phần tử hoặc giảm tỷ lệ phần tử (một số lần) bằng cách tăng hoặc giảm chiều rộng hoặc chiều cao hoặc cả hai
Cú pháp của chiều rộng và chiều cao của tỷ lệ.
biến đổi. tỷ lệ(n-lần-x m-lần-y)
Phương thức scaleX() tăng hoặc giảm xung quanh trục x
Thang cú pháp X.
biến đổi. scaleX(n-times-x);
Ví dụ .
biến đổi. tỷ lệX(2);
Phương thức scaleY() tăng hoặc giảm xung quanh trục y
Thang đo Cú pháp Y
biến đổi. scaleY(m-lần-y);
Ví dụ .
biến đổi. tỷ lệY(3);
Ví dụ về phương pháp chuyển đổi tỷ lệ 2D
.normal-val, .with-scale { width: 150px; height: 100px; padding:10px; margin-left:100px; background-color: tomato; text-align:center; border:2px solid black; } .with-scale { transition: transform 0.5s; background-color: violet; margin-left:90px; } .with-scale:hover { transform: scale(2,1.5); background-color: violet; margin-left:90px; -ms-transform: scale(2,1.5); /*IE*/ -webkit-transform: scale(2,1.5); /*Safari and Chrome*/ }
Chạy mã
c) Chuyển đổi phương pháp SkewX 2D
Phương thức skewX() xiên một phần tử dọc theo trục X. Điều này có nghĩa là, nó làm cho phần tử nghiêng theo một góc cụ thể dọc theo trục X
Cú pháp của phương thức Transform 2D skewX.
skewX(ndeg);
Ở đây,'n' có thể là bất kỳ giá trị hợp lệ nào cho mức độ & 'n' có thể dương hoặc âm
Ví dụ .
skewX(45deg);
skewX(-30deg);
Ví dụ về phương pháp Transform 2D skewX
.normalval { width: 300px; margin:10px; padding:20px; background-color: gold; text-align:center; } .skewx1 { width: 250px; height:40px; margin:10px; padding:10px; margin-left:15px; background-color: #33CBCC; text-align:center; transform: skewX(-40deg); -ms-transform: skewX(-40deg); -webkit-transform: skewX(-40deg); } .skewx2 { width: 250px; height:40px; padding:10px; margin-left:15px; background-color: crimson; text-align:center; transform: skewX(40deg); -ms-transform: skewX(40deg); -webkit-transform: skewX(40deg); }
Chạy mã
d) Phương pháp CSS Transform 2D Skew Y
Phương thức skewY() xiên một phần tử dọc theo trục Y. Điều này có nghĩa là, nó làm cho phần tử nghiêng ở một góc cụ thể dọc theo trục Y
Cú pháp của phương thức Transform 2D skewY.
skewY(mdeg);
Ở đây, 'm' có thể là bất kỳ giá trị hợp lệ nào cho mức độ & 'm' có thể dương hoặc âm
Ví dụ .
skewY(45deg);
skewY(-30deg);
Ví dụ về phương pháp Transform 2D skewY
.normalval { width: 200px; padding:20px; background-color: gold; text-align:center; } .skewy1 { width: 200px; padding:20px; background-color: #33CBCC; transform: skewY(-10deg); text-align:center; -ms-transform: skewY(-10deg); /*IE*/ -webkit-transform: skewY(-10deg); /*Safari and Chrome*/ } .skewy2 { width: 200px; padding:20px ; background-color: crimson; text-align:center; transform: skewY(10deg); -ms-transform: skewY(10deg); /*IE*/ -webkit-transform: skewY(10deg); /*Safari and Chrome*/ }
Chạy mã
Biến đổi nghiêng
Chúng ta hãy sử dụng thuộc tính skew tốc ký kết hợp skewX(mdeg) & skewY(ndeg).
Cú pháp chuyển đổi nghiêng.
skew(skewX(mdeg),skewY(ndeg));
Ví dụ về Biến đổi Skew
.skew-one-side, .skew-both-sides { width:150px; padding:20px; background-color: #33CBCC; text-align:center; margin-left:50px; border:4px solid black; transition:transform 1s linear; } .skew-one-side:hover { transform:skew(-50deg, 0deg); -ms-transform: skew(-50deg, 0deg); /*IE*/ -webkit-transform:skew(-50deg, 0deg); /*Safari and Chrome*/ } .skew-both-sides:hover { transform:skew(-50deg, -50deg); -ms-transform: skew(-50deg, 50deg); /*IE*/ -webkit-transform:skew(-50deg, 50deg); /*Safari and Chrome*/ }
Chạy mã
e) Chuyển đổi phương pháp xoay 2D
Xoay một phần tử mang lại một chuyển đổi đẹp cho phần tử. Nếu bạn muốn xoay phần tử theo 2 chiều thì bạn có thể sử dụng phương thức rotate()
Bạn có thể đặt lượng xoay bằng cách sử dụng một góc
Cú pháp của Phương thức Xoay 2D Chuyển đổi.
xoay(mdeg);
Ở đây, 'm' có thể là bất kỳ giá trị hợp lệ nào cho mức độ & 'm' có thể dương hoặc âm
Ví dụ .
xoay(30deg);
xoay(-10deg);
Ví dụ về Phương pháp Xoay 2D Chuyển đổi đơn giản
.normalval { width: 200px; padding:20px; background-color: tomato; text-align:center; } .rotateval { width: 200px; padding:20px; background-color: #33CBCC; text-align:center; transform: rotate(190deg); -ms-transform: rotate(190deg); /*IE*/ -webkit-transform: rotate(190deg); /*Safari and Chrome*/ }
Chạy mã
Chúng ta hãy lấy một ví dụ khác về phương thức rotate() biến đổi một phần tử khi người dùng thực hiện một số hành động như di chuột
Ví dụ về Chuyển đổi Xoay khi di chuột
.tranform-rotate{ width:250px; height:50px; padding:30px; margin-left:50px; background-color: dodgerblue; border:2px solid black; transition:transform 3s linear; } .tranform-rotate:hover{ transform: rotate(360deg); }
Chạy mã
Cảnh báo/Nguy hiểm/Thông tin/Thành công 360 độ bằng 1 lượt nên thay vì sử dụng - transform:rotate(360deg);
transform:rotate(1turn);
img {
width: 250px;
height: 150px;
transition: transform 1s;
}
img:hover {
transform: translate(50px,60px);
-webkit-transform: translate(50px,60px);
-moz-transform: translate(50px,60px);
-ms-transform: translate(50px,60px);
}
0
Ngoài ra, nếu bạn sử dụng giá trị âm của lượt, phần tử sẽ quay ngược chiều kim đồng hồ i. e. -0. 5 vòng bằng -180 độ.
360deg cũng bằng 400grad nên đoạn mã trên giống với -
f) Chuyển đổi phương pháp ma trận 2D
Phương thức matrix() là sự kết hợp của scaleX(), skewY(), skewX(), scalY(), translateX() và translateY()
Cú pháp của phương thức ma trận 2D biến đổi.
ma trận(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY());
vì vậy, nói một cách đơn giản, cú pháp giống như -
ma trận(a,b,c,d,e,f);
trong đó a,d giúp tăng hoặc giảm tỷ lệ các phần tử. Nó giống như tỷ lệ (a, d)
Tương tự, b,c xiên phần tử theo trục X và Y tương ứng. Nó giống như skew(b,c)
Và e,f giúp dịch phần tử (di chuyển phần tử) từ vị trí này sang vị trí khác. Nó giống như translate(e,f)
Cảnh báo/Nguy hiểm/Thông tin/Thành công scaleX(),skewX(), skewY() & scaleY() là các Biến đổi tuyến tính và là các số có hoặc không có giá trị thập phân nên các giá trị này .
Các skewX() và skewY() trong trường hợp này KHÔNG theo độ mà theo số. × Bỏ qua cảnh báo
Giả sử chúng ta có
- scale( 3 ) – Có nghĩa là phần tử phải chia tỷ lệ 3 lần theo trục X và Y. Nó giống như tỷ lệ( 3,3 )
- xiên( 0. 3 ) – Tương tự như vậy là skew( 0. 3,0. 3 )
- translate( 2 ) – Tương tự, nó giống translate( 2,2 Nếu nó có 1 giá trị như thế này –
transform-origin. một;Ở đây, a có thể lấy bất kỳ một trong các giá trị này, chẳng hạn như –
- x%(như 20%)
- chiều dài (như 20px)
- bên trái
- bên phải
- đứng đầu
- đáy
- trung tâm
img { width: 250px; height: 150px; transition: transform 1s; } img:hover { transform: translate(50px,60px); -webkit-transform: translate(50px,60px); -moz-transform: translate(50px,60px); -ms-transform: translate(50px,60px); } 2
Cú pháp của nguồn gốc Biến đổi 2D - Loại 2
-> Nếu nó có 2 giá trị như thế này –
transform-origin. x-pos y-pos;Tại đây, x-pos có thể nhận bất kỳ giá trị nào trong số này, chẳng hạn như –
- x%(như 20%)
- chiều dài (như 20px)
- bên trái
- trung tâm
- bên phải
Tại đây, y-pos có thể nhận bất kỳ giá trị nào trong số này, chẳng hạn như –
- x%(giống như 40%)
- chiều dài (như 30px)
- đứng đầu
- đáy
- trung tâm
Giá trị mặc định là biến đổi nguồn gốc. 50% 50%;
img { width: 250px; height: 150px; transition: transform 1s; } img:hover { transform: translate(50px,60px); -webkit-transform: translate(50px,60px); -moz-transform: translate(50px,60px); -ms-transform: translate(50px,60px); } 3
Cú pháp của nguồn gốc 3D Transform
- biến đổi nguồn gốc. XYZ;
Ở đây, x có thể nhận bất kỳ một trong các giá trị này, chẳng hạn như –
- n%(like 20%) trong đó n có thể là một số
- chiều dài (như 20px)
- bên trái
- trung tâm
- bên phải
Ở đây, y có thể nhận bất kỳ một trong các giá trị này, chẳng hạn như –
- m%(like 40%) trong đó m có thể là một số
- chiều dài (như 30px)
- đứng đầu
- đáy
- trung tâm
trong khi, z có thể có giá trị độ dài hợp lệ như 2em, 3px, v.v.
Chúng ta sẽ tìm hiểu về chuyển đổi 3D khi bạn tiến xa hơn trong trang này
Ví dụ về nguồn gốc biến đổi
img { width: 250px; height: 150px; transition: transform 1s; } img:hover { transform: translate(50px,60px); -webkit-transform: translate(50px,60px); -moz-transform: translate(50px,60px); -ms-transform: translate(50px,60px); } 4
Chạy mã
nhiều chuyển đổi
Chúng ta có thể kết hợp nhiều thuộc tính biến đổi như bên dưới-
Ví dụ về nhiều phép biến đổi
img { width: 250px; height: 150px; transition: transform 1s; } img:hover { transform: translate(50px,60px); -webkit-transform: translate(50px,60px); -moz-transform: translate(50px,60px); -ms-transform: translate(50px,60px); } 5
Chạy mã
Đến bây giờ, chúng ta đã biết biến đổi 2D là gì và các thuộc tính của nó là gì
Hãy cho chúng tôi hiểu biến đổi 3D là gì và các thuộc tính của nó là gì
2. Chuyển đổi 3D
Biến đổi 3D là biến đổi phần tử trên trục X, trục Y & trục Z
Các biến đổi 3D có các phương pháp quan trọng này-
- xoayX()
- xoayY()
- xoayZ()
- xoay3d()
- luật xa gần()
- dịchX(x)
- dịchY(y)
- dịchZ(z)
- translate3d(x,y,z)
- tỷ lệX(x)
- tỷ lệY(y)
- tỷ lệZ(z)
- tỷ lệ3d(x,y,z)
Cảnh báo/Nguy hiểm/Thông tin/Thành công
1. Chuyển đổi phương pháp 3D Rotate X
Phương thức rotateX() giúp xoay một phần tử quanh trục X
Cú pháp của phương pháp 3D Rotate X.
rotateX(mdeg);
Ví dụ .
rotateX(40deg);
Cảnh báo/Nguy hiểm/Thông tin/Thành công Một số phiên bản cũ hơn không hỗ trợ phương thức rotateX() nên bạn nên cẩn thận khi sử dụng. × Bỏ qua cảnh báo
Ví dụ về phương pháp Transform 3D Rotate X
img { width: 250px; height: 150px; transition: transform 1s; } img:hover { transform: translate(50px,60px); -webkit-transform: translate(50px,60px); -moz-transform: translate(50px,60px); -ms-transform: translate(50px,60px); } 6
Chạy mã
2. Chuyển đổi phương pháp 3D Rotate Y
Phương thức rotateY() giúp xoay một phần tử quanh trục Y
Cú pháp của phương pháp 3D Rotate Y.
rotateY(ndeg);
Ví dụ .
xoayY(40độ);
Cảnh báo/Nguy hiểm/Thông tin/Thành công Một số phiên bản cũ hơn không hỗ trợ phương thức rotateY() nên bạn nên cẩn thận khi sử dụng. × Bỏ qua cảnh báo
Ví dụ về phương pháp Transform 3D Rotate Y
img { width: 250px; height: 150px; transition: transform 1s; } img:hover { transform: translate(50px,60px); -webkit-transform: translate(50px,60px); -moz-transform: translate(50px,60px); -ms-transform: translate(50px,60px); } 7
Chạy mã
Chuyển đổi lật
Sử dụng phương thức rotateY() và một số thuộc tính khác, chúng ta có thể tạo một phần tử Flip. Hãy chuyển sang ví dụ và xem đầu ra
Ví dụ về Lật chuyển đổi
img { width: 250px; height: 150px; transition: transform 1s; } img:hover { transform: translate(50px,60px); -webkit-transform: translate(50px,60px); -moz-transform: translate(50px,60px); -ms-transform: translate(50px,60px); } 8
Chạy mã
3. Chuyển đổi phương pháp 3D Rotate Z
Phương thức rotateZ() giúp xoay một phần tử quanh trục Z
Cú pháp của phương pháp 3D Rotate Z.
rotateZ(xdeg);
Ví dụ .
rotateZ(40deg);
Cảnh báo/Nguy hiểm/Thông tin/Thành công Một số phiên bản cũ hơn không hỗ trợ phương thức rotateZ() nên bạn nên cẩn thận khi sử dụng. × Bỏ qua cảnh báo
Ví dụ về phương pháp Transform 3D Rotate Z
img { width: 250px; height: 150px; transition: transform 1s; } img:hover { transform: translate(50px,60px); -webkit-transform: translate(50px,60px); -moz-transform: translate(50px,60px); -ms-transform: translate(50px,60px); } 9
Chạy mã
4. Chuyển đổi Xoay 3D
Phương thức rotate3d() giúp xoay một phần tử xung quanh cả 3 chiều mà tôi. e. Trục X, trục Y và trục Z
Cú pháp của CSS Transform 3D Rotate.
rotate3d(x,y,z,ndeg);
Trong đó trục x – X, trục y – trục Y, trục z – Z & ndeg là lượng độ (góc như 40deg hoặc -30deg)
Cảnh báo/Nguy hiểm/Thông tin/Thành công Khi 'ndeg' dương, phần tử có xu hướng xoay theo chiều kim đồng hồ trong khi 'ndeg' âm, phần tử có xu hướng xoay . × Bỏ qua cảnh báo
Ví dụ về CSS Transform 3D Rotate
.normal-val, .with-scale { width: 150px; height: 100px; padding:10px; margin-left:100px; background-color: tomato; text-align:center; border:2px solid black; } .with-scale { transition: transform 0.5s; background-color: violet; margin-left:90px; } .with-scale:hover { transform: scale(2,1.5); background-color: violet; margin-left:90px; -ms-transform: scale(2,1.5); /*IE*/ -webkit-transform: scale(2,1.5); /*Safari and Chrome*/ } 0
Chạy mã
Hãy để chúng tôi lấy một ví dụ khác về rotate3d(). Ví dụ dưới đây sẽ giống như hoạt hình 3D sử dụng biến đổi 3D-
Ví dụ về Chuyển đổi hoạt hình 3D
.normal-val, .with-scale { width: 150px; height: 100px; padding:10px; margin-left:100px; background-color: tomato; text-align:center; border:2px solid black; } .with-scale { transition: transform 0.5s; background-color: violet; margin-left:90px; } .with-scale:hover { transform: scale(2,1.5); background-color: violet; margin-left:90px; -ms-transform: scale(2,1.5); /*IE*/ -webkit-transform: scale(2,1.5); /*Safari and Chrome*/ } 1
Chạy mã
5. Chuyển đổi phối cảnh
Khi bạn tìm kiếm ý nghĩa của Phối cảnh trong Google, nó sẽ đọc -
Trích dẫn HTML"Nghệ thuật biểu diễn các đối tượng ba chiều trên một bề mặt hai chiều để tạo ấn tượng đúng về chiều cao, chiều rộng, chiều sâu và vị trí của chúng trong mối quan hệ với nhau. "
Nó kiểm soát khoảng cách của một đối tượng so với người dùng để nó tạo ra một góc nhìn về một đối tượng cho người dùng
Nói một cách đơn giản, bạn có thể coi đó là khoảng cách giữa màn hình máy tính và mắt của bạn.
Cú pháp của phối cảnh chuyển đổi.
phối cảnh. đơn vị hợp lệ. thừa kế. không;
Giá trị mặc định là –
phối cảnh. không;
Ví dụ về phối cảnh chuyển đổi
.normal-val, .with-scale { width: 150px; height: 100px; padding:10px; margin-left:100px; background-color: tomato; text-align:center; border:2px solid black; } .with-scale { transition: transform 0.5s; background-color: violet; margin-left:90px; } .with-scale:hover { transform: scale(2,1.5); background-color: violet; margin-left:90px; -ms-transform: scale(2,1.5); /*IE*/ -webkit-transform: scale(2,1.5); /*Safari and Chrome*/ } 2
Chạy mã
translateX, translateY và translateZ
translateX và translateY trong 2d và 3d giống nhau
translateZ sẽ di chuyển phần tử dọc theo Z(axis). Luôn nhớ đặt giá trị của phối cảnh khi sử dụng phương pháp translateZ
Trong ví dụ bên dưới, nếu phối cảnh là 800px thì phần tử sẽ dịch 300px dọc theo trục Z về phía người dùng. Vì vậy, nếu bạn giảm giá trị của phối cảnh và tăng giá trị của translateZ , then the image will appear much close to your eyes on hover.
Bạn có thể thay đổi các giá trị của phối cảnh và translateZ và tự đánh giá kết quả
Ví dụ về translateZ
.normal-val, .with-scale { width: 150px; height: 100px; padding:10px; margin-left:100px; background-color: tomato; text-align:center; border:2px solid black; } .with-scale { transition: transform 0.5s; background-color: violet; margin-left:90px; } .with-scale:hover { transform: scale(2,1.5); background-color: violet; margin-left:90px; -ms-transform: scale(2,1.5); /*IE*/ -webkit-transform: scale(2,1.5); /*Safari and Chrome*/ } 3
Chạy mã
Biến đổi khối lập phương 3D
Một khối lập phương 3D trông tuyệt vời trong mọi thiết bị. Chúng ta sẽ tạo nó bằng cách sử dụng biến đổi 2D, biến đổi 3D và một số thuộc tính khác của hoạt hình CSS