Como transformar objetos com css3
Em CSS3, um transformar
Conteúdo
- Video: tutorial html y css | posicionamiento de divs en el contenedor general (basico)
- Video: css3 animaciones | transiciones fáciles en css3 con transition sin javascript
- Video: aprende html5 y css3 desde cero - gratis
- Video: html5 y css3 como hacer que una imagen u obejeto gire 360 grados [transform]
matriz (a, b, c, d, tx, ty): distorce o objecto utilizando uma matriz definida por pontos a, b, c, e d. Em seguida, ele traduz a posição do objeto na tela por um valor indicado por tx e ty. (Você pode tentar a matriz () transformar para fora em w3schools.com.)
Existem versões de muitas destas funções que trabalham em objetos tridimensionais. Por exemplo, existe uma função Matrix3D (). Estas funções adicionar um z-eixo para a equação, de modo que você pode manipular objetos tridimensionais no espaço tridimensional. Você pode ler mais sobre como as versões 3D trabalhar em Mozilla Developer Network e CSS-Tricks.
traduzir (tx, ty), translateX (TX), translateY (ty): Modifica a posição do objecto na tela por um montante horizontal definido por tx, um montante vertical e definido por ty, ou ambos. (Você pode tentar a traduzir () transformar em w3schools.com.)
Video: tutorial html y css | posicionamiento de divs en el contenedor general (basico)
escala (x, y), scaleX (x), scaleY (y): Estica o objecto horizontalmente pela quantidade especificada por x, verticalmente pela quantidade especificada por Y, ou ambos. (Você pode tentar a escala () transformar em w3schools.com.)
rotação (ângulo), rotateX (ângulo), rotateY (ângulo): Roda o objecto ao número de graus especificadas no eixo desejado. (Você pode tentar a rotate () transformar em w3schools.com.)
O Internet Explorer não suportar todas as transformações. Por exemplo, você verá que o Internet Explorer 9 não suporta as funções rotateX () e rotateY ().
inclinação (angleX, Angley), skewX (angleX), skewY (Angley): distorce o objecto, o número de graus na horizontal especificados por angleX, o número de graus na vertical especificado por Angley, ou ambos. (Você pode tentar a inclinação () transformar em w3schools.com.)
A melhor maneira de entender essas transformações é vê-los em ação. O procedimento a seguir ajuda a criar um aplicativo de exemplo que demonstra as transformações que podem ser executadas.
Criar um novo arquivo de HTML5 com seu editor de texto.
Digite o seguinte código para a página HTML.
Exemplos de Transformadas Matriz
Traduzir
Escala
Video: Css3 animaciones | Transiciones fáciles en css3 con transition sin javascript
Rodar
Rodar Y
enviesado
O exemplo demonstra as transformações listados como parágrafos. Você pode tentar outras transformações, modificando o exemplo (a grande idéia).
Salve o arquivo como Transforms.HTML.
Criar um novo arquivo CSS com seu editor de texto.
Digite o seguinte informações de estilo CSS.
#Matrix {fronteira: sólido-fronteira-cor: preto-fronteira de largura: fina da fonte de tamanho: 30px; margem: 50 pixels; largura: 140px; altura: 40 px; transformar: matriz (0.866,0.5,0.4,0.866,5 , 15) - MS-transform: matriz (0.866,0.5,0.4,0.866,5,15) - webkit-transform: matriz (0.866,0.5,0.4,0.866,5,15) -} # Traduzir {border: sólido cor-de fronteira-: preto-fronteira de largura: fina da fonte de tamanho: 30px; margem: 50 pixels; largura: 140px; altura: 40 px; transformar: traduzir (20 p, 30px) - MS-transform: traduzir (20 p, 30px) - -webkit-transform: traduzir (20 p, 30px) -} # Escala {fronteira: sólido-fronteira-cor: preto-fronteira de largura:-fonte de tamanho fino: 30px; margem: 50 pixels; largura: 140px; altura : 40 px; transformar: escala (1.6, 0.75) - MS-transform: escala (1.6, 0.75) - -webkit-transform: escala (1.6, 0.75) -} # Rodar {fronteira: sólido-fronteira-cor: Black- fronteira de largura: fina da fonte de tamanho: 30px; margem: 50 pixels; largura: 140px; altura: 40 px; transformar: rotação (140deg) - MS-transform: rotação (140deg) - -webkit-transform: rotação (140deg) -} # RotateY {border: solid-border-color: Black-border-width: thin-font-size: 30px; margin: 50p x; width: 140px; height: 40px; transform: rotateY (140deg) - ms-transform: rotateY (140deg) - webkit-transform: rotateY (140deg) -} # Skew {border: solid-border-color: Black -border-largura: fina da fonte de tamanho: 30px; margem: 50 pixels; largura: 140px; altura: 40 px; transformar: inclinação (15deg, 30deg) - MS-transform: inclinação (15deg, 30deg) - -webkit-transformar : inclinação (15deg, 30deg) -}Cada uma dessas transformações usa exatamente o mesmo formato de parágrafo para que você possa entender melhor como eles funcionam. O uso de uma fronteira torna mais fácil de entender a transformação porque a combinação de palavras e um objeto na tela transmitir mais informações (algo para se lembrar quando você criar suas próprias aplicações de teste).
As transformações são considerados experimentais, mesmo que eles aparecem como parte da especificação. A fim de usá-los com o Internet Explorer 9 +, você deve incluir o prefixo -ms-. Ambos Safari e Chrome requer o prefixo -webkit-. É por isso que você vê cada transformação listado três vezes. As transformadas devem também trabalhar com ambos Opera e Firefox sem qualquer problema.
Salve o arquivo como Transforms.CSS.
Carregar o exemplo transformações.
Video: Aprende HTML5 y CSS3 desde cero - gratis
Você vê os efeitos de transformação. Todas estas transformações são usando a mesma fonte, tamanho da fonte e tamanho da caixa, de modo que as diferenças que você vê são unicamente devido à transformação ocorrendo. Repare que a transformação rotateY () realmente mostra o texto para trás.
Video: HTML5 y CSS3 Como hacer que una imagen u obejeto gire 360 grados [Transform]
Tente modificar os valores transformam para ver como as alterações afetam a saída. Você ficará surpreso com o quão flexível estas funções são.
É possível combinar transformações para criar efeitos ainda mais incomuns. Simplesmente separe-os com um espaço. Por exemplo, para combinar uma rotate () com uma inclinação (), você deverá digitar transform: rotate (25deg) inclinação (15deg, 30deg) -.