2

No CSS, muitas vezes eu gosto de utilizar algumas "classes modificadoras" para estender funcionalidades.

Exemplo:

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

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

Eu tenho uma dúvida quanto a propriedade transform. As vezes coloco algumas coisas lá, para normalizar a centralização do elemento, por exemplo. Porém ao usar uma outra classe para modificar a principal, sempre acabo tendo que redeclarar tudo de novo.

Exemplo:

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

No caso acima, se eu quisesse adicionar algo a mais no transform, por exemplo, um skew, eu não poderia fazer isso, sem ter que praticamente copiar a linha inteira.

Eu gostaria de saber se existe uma solução menos repetitiva no CSS sobre essa situação do transform.

Algumas propriedades costumam ter longas declarações, como font e background. Alguém poderia declarar um font: 12px arial bold. Porém a maioria delas possui modificadores como background-color, background-size, background-repeat, font-size ou font-weight que facilitam trocar uma parte da propriedade.

Queria saber se existe alguma coisa assim para transform.

1
  • Com preprocessadores é possível estender um seletor, mas acredito que ele sobrepõe o estilo base, talvez com algum plugin seja possível contornar
    – Costamilam
    20/11/2019 às 16:22

1 Resposta 1

3

Tem uma forma sim, é usando o Matrix() ou Matrix3d()!

inserir a descrição da imagem aqui inserir a descrição da imagem aqui

A diferença é que no matrix3d() vc habilita o plano Z, podendo fazer efeitos de perspectiva e complicando um pouco a matriz com mais informações...

matrix (a, b, c, d, tx, ty)

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

Aqui tem um exemplo, repare que só tem o transform matrix, porém ele tem vários atributos do transform ao mesmo tempo, como translate, skew, scale, rotate e por ai vai.

Veja que aqui temos exatamente essa situação, e repare como é possível transforma vários atributos de transform em uma matriz

#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>

O difícil é entender como a matriz funciona, como não é minha especialidade, vou deixar um link de pessoas que explicariam melhor que eu :D

Aqui tem um simulador para construir a matriz automaticamente https://www.useragentman.com/matrix/

inserir a descrição da imagem aqui

Aqui tem um código de exemplo usando animação junto com matriz (o código não é meu é só para fins didáticos):

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .