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