Neste artigo, vamos entender Transform In em detalhes e acompanhe-o com uma demonstração prática detalhada. As dicas a seguir serão abordadas neste artigo,
Com o avanço nas funcionalidades do site, é igualmente importante fornecer integrações inteligentes em seu site para torná-lo atraente e melhor. Adicionar vários elementos CSS que complementam o seu site são a necessidade do momento.
As pessoas ficam longe dos sites que realmente não atraem as massas. Então, que tal tentar transformar alguns dos elementos e embelezar seu CSS com um valor de compactação menor.
Para atender a necessidades semelhantes, transformamos a propriedade CSS que transforma elementos inclinando, girando, dimensionando ou traduzindo-os.
Continuando com este artigo sobre Transform In CSS
O que é transformar CSS?
Transformar um elemento CSS significa fornecer a ele uma vantagem na forma 2D ou 3D. Ele altera visualmente o estilo de um elemento.
A transformação 2D funciona nos eixos X e Y. Você pode fornecer qualquer aresta ou estrutura em ambos os eixos para fazer alterações. Já para a transformação 3D, ele precisa trabalhar nos eixos X, Y e Z para fornecer a profundidade necessária.
Propriedades de transformação CSS 2D:
| Função | Descrição |
matriz( n, n, n, n, n, n ) | Matriz de seis valores |
traduzir( x, y ) | Permite que o elemento se mova ao longo dos eixos X e Y |
translateX ( n ) | Permite que o elemento se mova ao longo do eixo X |
traduzirY ( n ) | Permite que o elemento se mova ao longo do eixo Y |
escala( x, y ) | Altera a largura e altura dos elementos |
scaleX ( n ) | Altera a largura do elemento |
scaleY ( n ) | Altera a altura de um elemento |
girar ( ângulo ) funções que diferem apenas em seu tipo de retorno não podem ser sobrecarregadas | Permite girar o elemento em um ângulo que é especificado no parâmetro |
enviesar ( ângulo x, ângulo y ) | Inclina o elemento ao longo dos eixos X e Y |
skewX ( ângulo ) | Inclina o elemento ao longo do eixo X |
enviesado ( ângulo ) | Inclina o elemento ao longo do eixo Y |
Propriedades de transformação CSS 3D:
Propriedade | Descrição |
transformar | Aplica uma transformação 2D ou 3D a um elemento |
origem de transformação | Permite que você mude a posição em elementos transformados |
estilo de transformação | Especifica como os elementos aninhados são renderizados no espaço 3D |
perspectiva | Especifica a perspectiva de como os elementos 3D são visualizados |
perspectiva-origem | Especifica a posição inferior dos elementos 3D diff entre hashmap e hashtable |
visibilidade da face posterior | Define se um elemento deve ou não ser visível quando não está voltado para a tela |
Por exemplo:
css .element {width: 20px height: 20px transform: scale (20)}Agora, ao fazer isso, o elemento definido será dimensionado em 20 vezes.
Não só isso, você também pode dimensionar o eixo em termos de escala horizontal e vertical.
transform: scaleX (2) transform: scaleY (.5)
Para fornecer uma transformação adequada em todos os navegadores, você pode:
div {-webkit-transform: scale (1.5) -moz-transform: scale (1.5) -o-transform: scale (1.5) transform: scale (1.5)}A propriedade transform CSS melhora o espaço de coordenadas do nível de formatação visual CSS.
Qual é o nível de formatação visual?
Nível de formatação visual significa processar um documento e apresentá-lo visualmente nas plataformas de mídia. Com a formatação visual, você pode transformar cada elemento em um modelo que esteja de acordo com o modelo de caixa CSS. O modelo de caixa CSS define um elemento em um formato de caixa retangular padrão que define o tamanho, a posição e as propriedades.
Nota: Apenas elementos transformáveis podem ser transformados.
Continuando com este artigo sobre Transform In CSS
Quais são as várias propriedades de transformação?
Vejamos todas as propriedades de transformação:
1.escala (): Escala significa alterar o tamanho do elemento horizontal ou verticalmente.
Para dimensionamento vertical:scaleX
c ++ merge sort code
Para escala horizontal:escalaY
Para um elemento, você também pode alterar o tamanho da fonte, o preenchimento, a altura ou a largura. O valor padrão é 1, o que também significa fornecer 0,5, pois o valor o divide pela metade, enquanto fornece 2 dobra a escala.
2. enviesamento (): A propriedade Skew permite que um usuário incline um elemento para a direita ou esquerda a partir de um ponto de coordenada. É quase como transformar um retângulo em um paralelogramo. Você pode inclinar um elemento por suas coordenadas.
Exemplo:
.element {transform: skewX (25deg)} .element {transform: skewY (25deg)Ao fazer isso, o elemento inclina 25 graus horizontal e verticalmente usando skewX ou skewY.
3. girar ( ) : Você pode girar um elemento no sentido horário usando esta propriedade. Você pode girá-lo 180 graus ou 360 graus para trazê-lo de volta ao seu lugar original.
.element {transform: rotate (25deg)}Para fornecer rotação também, você pode usar qualquer uma das três dimensões: rotateX, rotateY ou rotateZ.
4. traduzir ( ) : Você pode mover um elemento corretamente de cabeça para baixo ou de lado.
.element {transform: translate (20px, 10px)}Traduzir irá mover um objeto / elemento especificado de cabeça para baixo ou de lado. O primeiro valor especificado move o objeto para a direita (negativo o moverá para a esquerda) e o segundo valor o move para baixo (especificar um valor negativo o moverá para cima).
Se isso puder confundi-lo, aplique o eixo X para alterar a posição do elemento horizontalmente e os eixos Y para alterar a posição verticalmente. O aspecto mais incrível sobre a propriedade transform é que, aplicando transform apenas permitirá que o elemento se mova, mantendo todos os outros elementos ou texto intactos. A distância é geralmente medida em pixels ou porcentagens.
Por exemplo:
.element {transform: translateX (value) transform: translateY (value)}5. perspectiva (): você pode fornecer uma profundidade na perspectiva de um elemento. Permite dar uma transformação 3D a um elemento tornando-o cúbico na transformação.
translate3d (x, y, z)
translateZ (z)
translate3d (x, y, z) translateZ (z)
A introdução do eixo z dá ao elemento uma visualização 3D. translateZ () move o elemento em direção ao visualizador enquanto um valor negativo o move para longe.
6. matriz () : Combine todas as transformações em uma.
girar (45deg) traduzir (24px, 25px)
A aplicação de matrix () combina todas as propriedades de transformação em uma matriz.
A aplicação de propriedades de transformação pode aprimorar muito seu elemento e, portanto, o apelo de seu site. Experimente!
Isso nos leva ao final deste artigo sobre Transform In CSS.
Se você estiver interessado em aprender mais sobre desenvolvimento web, confira o por Edureka. O Treinamento de Certificação de Desenvolvimento Web ajudará você a aprender como criar sites impressionantes usando HTML5, CSS3, Twitter Bootstrap 3, jQuery e APIs do Google e implantá-lo no Amazon Simple Storage Service (S3).
Se você ainda estiver interessado Se você tiver alguma dúvida, pode postá-la na seção de comentários deste blog “O que é CSS”, e entraremos em contato com você o mais breve possível.