matrix3d()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Hàm matrix3d() CSS function định nghĩa một biến đổi 3D dưới dạng ma trận thuần nhất 4x4. Kết quả của nó là kiểu dữ liệu <transform-function>.

Try it

transform: matrix3d(
  -0.6,
  1.34788,
  0,
  0,
  -2.34788,
  -0.6,
  0,
  0,
  0,
  0,
  1,
  0,
  0,
  0,
  10,
  1
);

transform: matrix3d(
  0.5,
  0,
  -0.866025,
  0,
  0.595877,
  1.2,
  -1.03209,
  0,
  0.866025,
  0,
  0.5,
  0,
  25.9808,
  0,
  15,
  1
);

<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

css

matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)

Giá trị

Hàm matrix3d() được chỉ định với 16 giá trị. Chúng được mô tả theo thứ tự cột chính.

a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3: Là các <number> mô tả phép biến đổi tuyến tính.
a4 b4 c4 d4: Là các <number> mô tả phép tịnh tiến cần áp dụng.

Tọa độ Descartes trên ℝ^2	Tọa độ thuần nhất trên ℝℙ^2	Tọa độ Descartes trên ℝ^3	Tọa độ thuần nhất trên ℝℙ^3
Phép biến đổi này áp dụng cho không gian 3D và không thể biểu diễn trên mặt phẳng.		Một phép biến đổi affine 3D tổng quát không thể biểu diễn bằng ma trận tọa độ Descartes, vì phép tịnh tiến không phải là phép biến đổi tuyến tính.	$\left( \begin{array}{cccc} a1 & a2 & a3 & a4 \\ b1 & b2 & b3 & b4 \\ c1 & c2 & c3 & c4 \\ d1 & d2 & d3 & d4 \\ \end{array} \right)$

Cú pháp chính thức

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

Ví dụ

Ví dụ bóp méo khối lập phương

Ví dụ sau hiển thị một khối lập phương 3D được tạo từ các phần tử DOM và các phép biến đổi, có thể hover/focus để áp dụng phép biến đổi matrix3d() lên nó.

HTML

html

<section id="example-element" tabindex="0">
  <div class="face front">1</div>
  <div class="face back">2</div>
  <div class="face right">3</div>
  <div class="face left">4</div>
  <div class="face top">5</div>
  <div class="face bottom">6</div>
</section>

CSS

css

#example-element {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transition: transform 1.5s;
  transform: rotate3d(1, 1, 1, 30deg);
  margin: 50px auto;
}

#example-element:hover,
#example-element:focus {
  transform: rotate3d(1, 1, 1, 30deg)
    matrix3d(1, 0, 0, 0, 0, 1, 6, 0, 0, 0, 1, 0, 50, 100, 0, 1.1);
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: white;
}

.front {
  background: rgb(90 90 90 / 70%);
  transform: translateZ(50px);
}

.back {
  background: rgb(0 210 0 / 70%);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgb(210 0 0 / 70%);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgb(0 0 210 / 70%);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgb(210 210 0 / 70%);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgb(210 0 210 / 70%);
  transform: rotateX(-90deg) translateZ(50px);
}

Kết quả

Ví dụ tịnh tiến và tỷ lệ ma trận

Một ví dụ transform3d() khác, cài đặt hoạt ảnh kết hợp tịnh tiến và tỷ lệ.

HTML

html

<div class="foo">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quaerat sit
  soluta, quisquam exercitationem delectus qui unde in facere necessitatibus aut
  quia porro dolorem nesciunt enim, at consequuntur aliquam esse?
</div>

CSS

css

html {
  width: 100%;
}
body {
  height: 100vh;
  /* Centering content */
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
}
.foo {
  width: 50%;
  padding: 1em;
  color: white;
  background: #ff8c66;
  border: 2px dashed black;
  text-align: center;
  font-family: system-ui, sans-serif;
  font-size: 14px;
  /* Setting up animation for better demonstration */
  animation: MotionScale 2s alternate linear infinite;
}

@keyframes MotionScale {
  0% {
    /*
      Identity matrix is used as basis here.
      The matrix below describes the
      following transformations:
        Translates every X point by -50px
        Translates every Y point by -100px
        Translates every Z point by 0
        Scales down by 10%
    */
    /* prettier-ignore */
    transform: matrix3d(
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      -50, -100, 0, 1.1
    );
  }
  50% {
    /* prettier-ignore */
    transform: matrix3d(
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      0, 0, 0, 0.9
    );
  }
  100% {
    /* prettier-ignore */
    transform: matrix3d(
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      50, 100, 0, 1.1
    )
  }
}

Kết quả

Thông số kỹ thuật

Specification
CSS Transforms Module Level 2 # funcdef-matrix3d

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

Xem thêm

transform
Các thuộc tính biến đổi riêng lẻ:
<transform-function>

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content