transform

Try it

transform: matrix(1, 2, 3, 4, 5, 6);

transform: translate(120px, 50%);

transform: scale(2, 0.5);

transform: rotate(0.5turn);

transform: skew(30deg, 20deg);

transform: scale(0.5) translate(-100%, -100%);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Cú pháp

/* Giá trị từ khóa */
transform: none;

/* Giá trị hàm */
transform: matrix(1, 2, 3, 4, 5, 6);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2, 3, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

/* Nhiều giá trị hàm */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate3d(10px, 0, 20px) rotateY(30deg);

/* Giá trị toàn cục */
transform: inherit;
transform: initial;
transform: revert;
transform: revert-layer;
transform: unset;

Thuộc tính transform có thể được chỉ định là giá trị từ khóa none hoặc một hay nhiều giá trị <transform-function>.

Giá trị

<transform-function>

Một hoặc nhiều hàm biến đổi CSS được áp dụng. Các hàm biến đổi được nhân theo thứ tự từ trái sang phải, có nghĩa là các biến đổi tổng hợp được áp dụng theo thứ tự từ phải sang trái.

none

Chỉ định rằng không có biến đổi nào được áp dụng.

Khả năng tiếp cận

Các hoạt ảnh thu phóng/co giãn gây vấn đề về khả năng tiếp cận, vì chúng là tác nhân phổ biến gây ra một số loại đau nửa đầu. Nếu bạn cần đưa các hoạt ảnh như vậy vào trang web, bạn nên cung cấp tùy chọn để người dùng tắt hoạt ảnh, tốt nhất là trên toàn bộ trang web.

Ngoài ra, hãy cân nhắc sử dụng tính năng media prefers-reduced-motion — dùng nó để viết truy vấn media sẽ tắt hoạt ảnh nếu người dùng đã chỉ định giảm hoạt ảnh trong tùy chọn hệ thống.

Tìm hiểu thêm:

• MDN Giải thích WCAG, Hướng dẫn 2.3
• Hiểu Tiêu chí Thành công 2.3.3 | W3C Hiểu WCAG 2.1

Định nghĩa chính thức

Cú pháp chính thức

transform = 
  none              |
  <transform-list>  

<transform-list> = 
  <transform-function>+  

<transform-function> = 
  <scale3d()>      |
  <scale()>        |
  <scaleX()>       |
  <scaleY()>       |
  <scaleZ()>       |
  <translate3d()>  |
  <translate()>    |
  <translateX()>   |
  <translateY()>   |
  <translateZ()>   |
  <rotate3d()>     |
  <rotate()>       |
  <rotateX()>      |
  <rotateY()>      |
  <rotateZ()>      |
  <skew()>         |
  <skewX()>        |
  <skewY()>        |
  <matrix3d()>     |
  <matrix()>       |
  <perspective()>  

<scale3d()> = 
  scale3d( [ <number> | <percentage> ]#{3} )  

<scale()> = 
  scale( <number> , <number>? )  

<scaleX()> = 
  scaleX( <number> )  

<scaleY()> = 
  scaleY( <number> )  

<scaleZ()> = 
  scaleZ( [ <number> | <percentage> ] )  

<translate3d()> = 
  translate3d( <length-percentage> , <length-percentage> , <length> )  

<translate()> = 
  translate( <length-percentage> , <length-percentage>? )  

<translateX()> = 
  translateX( <length-percentage> )  

<translateY()> = 
  translateY( <length-percentage> )  

<translateZ()> = 
  translateZ( <length> )  

<rotate3d()> = 
  rotate3d( <number> , <number> , <number> , [ <angle> | <zero> ] )  

<rotate()> = 
  rotate( [ <angle> | <zero> ] )  

<rotateX()> = 
  rotateX( [ <angle> | <zero> ] )  

<rotateY()> = 
  rotateY( [ <angle> | <zero> ] )  

<rotateZ()> = 
  rotateZ( [ <angle> | <zero> ] )  

<skew()> = 
  skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )  

<skewX()> = 
  skewX( [ <angle> | <zero> ] )  

<skewY()> = 
  skewY( [ <angle> | <zero> ] )  

<matrix3d()> = 
  matrix3d( <number>#{16} )  

<matrix()> = 
  matrix( <number>#{6} )  

<perspective()> = 
  perspective( [ <length [0,∞]> | none ] )  

<length-percentage> = 
  <length>      |
  <percentage>  

Ví dụ

Dịch chuyển và xoay một phần tử

HTML

<div>Transformed element</div>

CSS

div {
  border: solid red;
  transform: translate(30px, 20px) rotate(20deg);
  width: 140px;
  height: 60px;
}

Kết quả

Thứ tự transform

Thứ tự của các hàm biến đổi có vai trò quan trọng. Trong ví dụ này, hai hộp được xoay và dịch chuyển theo cùng giá trị; chỉ thứ tự hàm biến đổi là khác nhau.

HTML

<div class="original"></div>
<div class="one">1</div>
<div class="two">2</div>

CSS

div {
  height: 200px;
  width: 200px;
  position: absolute;
  left: 200px;
  top: 50px;
  font-size: 4rem;
  line-height: 200px;
  text-align: center;
}
.original {
  border: 1px dashed;
}
.original::before,
.original::after {
  content: "";
  position: absolute;
  top: 100px;
  width: 500px;
  left: -150px;
  height: 1px;
  border-top: 2px dotted;
}
.original::after {
  transform: rotate(135deg);
}
.one {
  background-color: #cccccc;
}
.two {
  background-color: #d6bb72;
}

.one {
  transform: translateX(200px) rotate(135deg);
}
.two {
  transform: rotate(135deg) translateX(200px);
}

Kết quả

Khi một phần tử được xoay trước khi dịch chuyển, hướng dịch chuyển nằm trên trục đã xoay. Trục được chỉ ra bằng các đường chấm.

Thêm ví dụ

Vui lòng xem Sử dụng CSS transforms và <transform-function> để biết thêm ví dụ.

Thông số kỹ thuật

Khả năng tương thích trình duyệt

Xem thêm

• Sử dụng CSS transforms
• Kiểu dữ liệu <transform-function> với tất cả các hàm biến đổi được giải thích.
• Các thuộc tính CSS riêng lẻ: translate, rotate và scale (không có thuộc tính skew).
• Thuộc tính SVG transform
• Công cụ trực tuyến để trực quan hóa các hàm CSS Transform: CSS Transform Playground