matrix3d()

Базовая поддержка Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с марта 2022 года.

Функция matrix3d() CSS функция определяет 3D-преобразование как 4x4 однородную матрицу. Ее результатом является тип данных <transform-function>.

Попробовать

Синтаксис

Функция matrix3d() задается 16 значениями. Они описаны в порядке следования столбцов.

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

Значения

a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3: Представляют собой <number>, описывающие линейное преобразование.
a4 b4 c4 d4: Представляют собой <number>, описывающие перевод, который нужно применить.

Декартовы координаты на ℝ^2	Однородные координаты на ℝℙ^2	Декартовы координаты на ℝ^3	Однородные координаты на ℝℙ^3
Это преобразование применяется к 3D пространству и не может быть представлено на плоскости.		Общее 3D аффинное преобразование не может быть представлено с помощью матрицы декартовых координат, так как переводы не являются линейными преобразованиями.	$\left( \begin{array}{cccc} a1 & a2 & a3 & a4 \\ b1 & b2 & b3 & b4 \\ c1 & c2 & c3 & c4 \\ d1 & d2 & d3 & d4 \\ \end{array} \right)$

Примеры

Пример сжатия куба

Следующий пример демонстрирует 3D куб, созданный из элементов DOM и преобразований, на который можно навести указатель мыши/фокусироваться для применения преобразования matrix3d() к нему.

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

#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: #fff;
}

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

Результат

END_OF_DOCUMENT_MARKER ```

Пример матричного перемещения и масштабирования

Еще один transform3d() пример, который реализует анимированное комбинированное перемещение и масштабирование.

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

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 {
  from {
    /*
      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%
    */
    transform: matrix3d(
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      -50, -100, 0, 1.1
    );
  }
  50% {
    transform: matrix3d(
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      0, 0, 0, 0.9
    );
  }
  to {
     transform: matrix3d(
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      50, 100, 0, 1.1
    )
  }
}

Результат

Спецификации

Спецификация
Модуль CSS Transforms уровня 2 # funcdef-matrix3d

Совместимость с браузерами

	Десктоп					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`matrix3d`	12	12	10 До Firefox 16, значения перемещения `matrix3d()` могли быть `<length>`, помимо стандартных `<number>`.	15	4	18	10	14	3.2	1.0	3

См. также

transform
Отдельные свойства преобразования:
<transform-function>

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix3d