Rotação de Elementos
Gerando formas geométricas com movimentos simples
@CSS3
Para formatar visualmente elementos de marcação sabemos que o padrão que o box model nos fornece é um dimensionamento que permite movimentar boxes utilizando algumas propriedades, a exemplo do posicionamento float, configurações que usam elementos de bloco e elementos inline. Outros tipos mais recentes como o flexbox e grid também têm apresentando características de alinhamento de conteúdo mais eficazes, flexibilizando-se como alternativas de posicionamento CSS.
No entanto, existe algo em comum a estas propriedades , ou seja, é perceptível que independente da escolha da propriedade de posicionamento, ambos fornecem apenas duas possibilidades de direção dos elementos, sendo estas: horizontal e vertical.
Porém, como seguir um fluxo diferente e posicionar os elementos de formas mais interessantes?
Podemos utilizar a propriedade transform com o valor definido pela função rotate(), e criar formas geométricas diversas, além disso, direcionar o elemento de marcação diagonalmente, por exemplo, seguindo qualquer ângulo de rotação para criá-las.
Codificando — exemplo 1:
Essa propriedade segue uma sintaxe simples e pelo código podemos evidenciar. O código foi feito utilizando três divs e estão rotacionadas cada uma delas de modo a gerar uma forma geométrica hexagonal. Vejamos:
Com isso, o código gerado apresenta um resultado que induz a imaginar que a forma geométrica é um hexágono, porém, na verdade o que temos é uma sobreposição de divs, que foram definidas com mesma largura, altura e mesmas cores. A imagem abaixo ilustra como as divs se comportam antes de adicionar as mesmas cores.
O uso da margin também poderia ser substituído pela propriedade transform-origin, que nas transformações que estamos tratando utilizam-se de dois valores para alterar as especificações definidas pelo padrão (ponto central do box). Ou seja, podemos mudar os valores das coordenadas x e y e posicionar os elementos transformados. Para testar estes tipos de posicionamentos, o site da W3Schools fornece um simulador:
O suporte para os navegadores também apresentam prefixos específicos, ou seja, que garantem que a propriedade transform funcione corretamente, por isso, essa observação de suporte foi codificada no html, incluindo os principais navegadores antes da tag que gera o movimento de rotação.
A Figura 3 ilustra o suporte referente a propriedade transform-origin:
Codificando — exemplo 2:
Outra possibilidade de utilizar o rotacionamento é a aplicação em ícones, no qual a propriedade rotate apresenta-se mais consistente, principalmente, para aqueles ícones que simulam movimentos, conforme o resultado da imagem abaixo e o html destacando a aplicação da propriedade.
Demo:
Para ver mais detalhes sobre este exemplo você pode acessar demonstração neste link e o código neste repositório.
Vantagens
Ambos exemplos são simples, e mostram que, a ideia inicial de rotacionar elementos podem, por exemplo, ser aplicáveis em conjunto com animações e tornar o uso da propriedade mais interessante. Nesse sentido, as possibilidades são extensas para utilizar com outros ícones, bem como aplicar imagens e mudar a direção dos ângulos, uso em layouts, e também em divs com formatos geométricos diversos. Além disso, utilizar o rotate em projetos que envolvam configurações de poucos elementos é o mais indicado devido a sua versatilidade.
Exemplos de layouts com formas geométricas
Desvantagens
As desvantagens consistem em utilizar essa única ferramenta como possibilidade de estruturação dos elementos, pois, ter o controle de todas as divs a medida que número de elementos aumentam, podem tornar mais demorado o processo de codificação se comparado a outras metodologias com a mesma finalidade.
Infinitas possibilidades
Fazendo o mesmo, porém mudando a propriedade com: clip-path.
“A propriedade clip-path no CSS permite que você especifique uma região específica de um elemento a ser exibida, em vez de mostrar a área completa.” — css-tricks
Suas atribuições são: inset(), polygon() e ellipse (). Essa propriedade mostra que podemos “desenhar” um polígono qualquer e com isso configurar mais valores com o objetivo de especificar a área geométrica que pretende-se codificar. Vejamos o exemplo do código:
O resultado para a mesma forma geométrica, apresenta-se como:
É perceptível que o formato é o mesmo do exemplo 1, no entanto foi necessário incluir bem mais valores referentes a região a ser exibida do que utilizando a propriedade de rotação.
A desvantagem do uso dessa propriedade consiste na quantidade de parâmetros da forma geométrica pretendida. A vantagem no entanto, é que existem mais possibilidades de formatar um elemento com níveis de complexidades maiores com o uso do clip-path.
Um dos sites que faz ajustes de forma a fornecer o código e gerar mais opções de formatos geométricos é : http://bennettfeely.com/clippy/
Além das opções pré definidas, o usuário pode criar sua própria forma geométrica e não seguir nenhuma regra pra criar quaisquer formato.
Nesse sentido, a existência de ferramentas auxiliares pra gerar formatos dos tipos aqui descritos se constituem como uma alternativa mais amigável de configuração das formas geométricas e até mesmo sem precisar utilizar a propriedade transform: rotate().
Conclusão
As alternativas para obter formatos diferentes de elementos com as coordenadas definidas pelo default, permitem experimentar outras complementações que o CSS apresenta, exemplificamos brevemente duas delas e de forma bem introdutória, com o uso do transform com valor rotate() e o clip-path.
O uso de tais propriedades ainda que utilizadas sozinhas ou complementadas com animações e outras funções podem ser ferramentas úteis e se adequar a funções adicionais na criação do seu site.
