Is there any way to extend the "Transform" property to avoid losses or repetitions?

Question

In CSS, I often like to use some "modifying classes" to extend functionality.

Example:

.btn{
    background-color: red;
    height: 50px;
}

.btn.btn-outlined{
   background-color: transparent;
   color: red;
}

I have a question about the property transform. Sometimes I put some things there, to normalize the centralization of the element, for example. But when using another class to modify the main one, I always end up having to redeclare everything again.

Example:

.principal{
    transform: rotateX(25deg) translateX(-50%) scale(1.2);
}

In the above case, if I wanted to add something to the transform, for example, a skew, I couldn’t do it without having to practically copy the entire line.

I would like to know if there is a less repetitive solution in the CSS about this transform.

Some properties often have long declarations, such as font and background. Someone could declare a font: 12px arial bold. But most of them have modifiers like background-color, background-size, background-repeat, font-size or font-weight which facilitate the exchange of a share of the property.

I wonder if there’s anything like that for transform.

Answer 1

There’s a way yes, it’s using the Matrix() or Matrix3d()!

The difference is that in matrix3d() you enable the plan Z, can make perspective effects and complicating a little the matrix with more information...

Matrix (a, b, c, d, Tx, ty)

matrix3d (a1, B1, C1, D1, a2, B2, C2, D2, A3, B3, C3, D3, A4, B4, C4, D4)

Here’s an example, notice you only have the transform matrix, but it has several attributes of transform at the same time, as translate, skew, scale, rotate and so on.

See that here we have exactly this situation, and notice how it is possible to transform various attributes of transform in a matrix

#object1 {
    transform-origin: 0 0;
    transform: 
                rotate(15deg) 
                translateX(20px)  
                scale(1.5, 2.6) 
                skew(220deg, -150deg) 
                translateX(20px);

    width: 50px;
    height: 50px;
    background-color: red;
}

#object2 {
    transform-origin: 0 0;
    transform: 
                matrix(1.06, 1.84, 0.54, 2.8, 20, 20);
    width: 50px;
    height: 50px;
    background-color: blue;
}

<div id="object1"></div>
<div id="object2"></div>

The hard part is understanding how the matrix works, as it is not my specialty, I will leave a link of people who would explain better than me :D

• https://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/
• https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix3d

Here is a simulator to build the matrix automatically https://www.useragentman.com/matrix/

Here is an example code using animation together with matrix (the code is not mine for educational purposes only):

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,.01,
      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
    )
  }
}

<div class="foo">
   Take the blue pill
</div>