07 mar 2017

Entendendo a propriedade Transform no css

Utilizando a propriedade transform é possível manipular visualmente um elemento (dimensionar, mover, rotacionar, etc), e abaixo veremos exemplos de como utilizar cada função.

Utilizaremos o mesmo código html para todos os exemplos:

<div class="original">
  <div class="spin">
    <div class="box">Texto</div>
  </div>
</div>

Rotate
Como o nome ja sugere, é utilizada para rotacionar o elemento, de 0 a 360 graus. Utilizando valores positivos, a rotação será realizada no sentido horário e, utilizando valores negativos, no sentido Anti-horário.

body {
  color: #fff;
  margin: 30px;
}

.original {
  background: #d2d2d2;
  margin: 10px 15px;
  width: 95px;
}

.box {
  background: red;
  height: 95px;
  width: 95px;
  line-height: 95px;
  text-align: center;
  transform: rotate(-55deg);

}
.spin {
  cursor: pointer;
}
.spin:hover {
    animation: spin 3s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

Scale
Utilizado para redimensionar os elementos, tendo como escala padrão 1. Valores maiores que 1, aumentarão o tamanho do elemento, e valores menores que 1 diminuirao sua escala.

body {
  color: #fff;
  margin: 30px;
}

.original {
  background: #d2d2d2;
  margin: 10px 15px;
  width: 95px;
}

.box {
  background: red;
  height: 95px;
  width: 95px;
  line-height: 95px;
  text-align: center;
  transform: rotate(-55deg);

}
.spin {
  cursor: pointer;
}
.spin:hover {
    animation: spin 3s linear;
}

@keyframes spin {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(2);
  }
}

Translate
A função de translate serve para mover o elemento para os lados, ou para cima/baixo. A sintaxe pode ser especifica para um dos eixos x/y (translateX ou translateY), como pode ser apenas translate(x, y).

body {
  color: #fff;
  margin: 30px;
}

.original {
  background: #d2d2d2;
  margin: 10px 15px;
  width: 95px;
}

.box {
  background: red;
  height: 95px;
  width: 95px;
  line-height: 95px;
  text-align: center;
  transform: rotate(-55deg);

}
.spin {
  cursor: pointer;
}
.spin:hover {
    animation: spin 3s linear;
}

@keyframes spin {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50%, 50%);
  }
}

Skew
É utilizado para “distorcer” os elementos, alterando os angulos.

body {
  color: #fff;
  margin: 30px;
}

.original {
  background: #d2d2d2;
  margin: 10px 15px;
  width: 95px;
}

.box {
  background: red;
  height: 95px;
  width: 95px;
  line-height: 95px;
  text-align: center;
  transform: rotate(-55deg);

}
.spin {
  cursor: pointer;
}
.spin:hover {
    animation: spin 5s linear infinite;
}

@keyframes spin {
  0% {
    transform: skew(0, 0);
  }
  100% {
    transform: skew(180deg, 30deg);
  }
}

Leave a Comment