Matrix3d() - CSS Function

Description of the matrix3d() function.

The function matrix3d() applies a composite transformation to an element in all three dimensions. This transformation can include 3D translations, 3D rotations, scaling, or tilting.
So matrix3d() can replace all the other 3D transformation functions. However, using it is a bit more complex than using single-step transformations, especially when it comes to figuring out the parameter values.

Transformation functions:

• rotate3d() : Defines a 3D rotation to be applied to an element around any axis in 3D.
• rotateX() : Defines a rotation of the element around the X-axis (in 3D),
• rotateY() : Sets a 3D rotation of the element around the y-axis.
• rotateZ() : Sets a rotation of the element around the z-axis.
• translate3d() : Defines a 3D translation along one or more of the X, Y, and Z axes.
• translateZ() : Defines a translation along the Z axis (perpendicular to the screen).
• scale3d() : Sets 3D scaling.
• scaleZ() : Set Z-axis scaling.
• perspective() : Sets the height of the observer in the case of a 3D transformation.

Here is a tool to help you determine the parameters of matrix3d() in simple cases: The Matrix Construction Set.

The matrix3d() value can be used with the following properties:

• transform : Applies one or more geometric transformations (rotations, enlargements, etc.).

Syntaxes of the matrix3d() function.

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

  a1 to d4 are unitless numbers that describe all the transformations applied to the element. Check out the simulator below for the equivalents with the unit transformation functions.

Simulator.

The simulator below gives you the parameters of the function matrix3d() equivalent to a basic transformation (translation, rotation, etc). It doesn't allow you to combine multiple transformations, which of course is possible with the matrix3d() function.

We can see that for translations and scaling, the parameters of matrix3d() are relatively easy to figure out.
Tilts are already a bit trickier to translate: you need to calculate the tangent of the tilt angle.
As for rotations, they require changing several of the parameters of the matrix3d() function by applying the cosine and sine values of the rotation angle.

Browsers compatibility with matrix3d() function.

Current browsers handle the matrix3d() function properly, as well as all 3D transformations.

Notes:

(1) Internet Explorer does not support transform-style:preserve-3d, thus limiting the nesting of animations.

1

3D
transformations

2

matrix3d()
function

Estimated overall support.

97%

97%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

1

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Historic of the matrix3d() function.

• CSS Transforms Module Level 2

  In addition to the 2D transformations already presented in level 1 of the specification, this module deals with 3D transformations. It introduces new properties to manage the viewpoint height and the rendering of 3D effects.
  This module also introduces the individual properties of rotation, translation, and zoom effect.

  Regarding matrix3d() Level 2 of the Transforms specification, introducing 3D transformations.
  Adding matrix3d() function.
  
  

  March 03, 2020

  Working Draft.

  

  

  

See also, about transformations.

The W3C organizes CSS specifications into modules. The module "CSS Transforms Module" gathers all the properties and functions related to transformations in CSS:

Properties:

Functions: