Chuyển đổi: translatex css

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);
}  

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)

Bây giờ, các giá trị trên có thể được biểu diễn đơn giản bằng hàm matrix() như bên dưới –
matrix(3,0. 3,0. 3,3,2,2).

Ví dụ về phương pháp chuyển đổi ma trận 2D

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);
}  

Chạy mã

Nguồn gốc chuyển đổi CSS

Khi sử dụng thuộc tính transform, bạn có thể biến đổi một phần tử

Bây giờ, nếu bạn muốn thay đổi vị trí gốc của các phần tử đã biến đổi, thì bạn có thể sử dụng thuộc tính transform-origin

Vì vậy, về cơ bản, đó là điểm gốc mà phép biến đổi lấy làm điểm tham chiếu và thuộc tính biến đổi sẽ hoạt động đối với điểm này

Cú pháp nguồn gốc 2D Transform - Loại 1

-> 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ư –

1. x%(như 20%)
2. chiều dài (như 20px)
3. bên trái
4. bên phải
5. đứng đầu
6. đáy
7. 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);
}  

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ư –

1. x%(như 20%)
2. chiều dài (như 20px)
3. bên trái
4. trung tâm
5. 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ư –

1. x%(giống như 40%)
2. chiều dài (như 30px)
3. đứng đầu
4. đáy
5. 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);
}  

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ư –

1. n%(like 20%) trong đó n có thể là một số
2. chiều dài (như 20px)
3. bên trái
4. trung tâm
5. 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ư –

1. m%(like 40%) trong đó m có thể là một số
2. chiều dài (như 30px)
3. đứng đầu
4. đáy
5. 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);
}  

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);
}  

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-

1. xoayX()
2. xoayY()
3. xoayZ()
4. xoay3d()
5. luật xa gần()
6. dịchX(x)
7. dịchY(y)
8. dịchZ(z)
9. translate3d(x,y,z)
10. tỷ lệX(x)
11. tỷ lệY(y)
12. tỷ lệZ(z)
13. 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);
}  

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);
}  

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);
}  

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);
}  

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*/
}

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*/
}

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*/
}

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*/
}

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

chuyển đổi dịch là gì (

DịchX là gì (

Phương thức transform translate() dùng để làm gì?

Làm thế nào để chuyển đổi dịch hoạt động trong CSS?