x
SuperUp, do que estás a espera?
Entra ou Regista-te no fórum para visualizar todo conteúdo.
Top Membros do Mês
Últimos assuntos
Algum administrador?
por poison Seg 26 Jun - 20:30

Cria a tua Musica
por MIRISHIA Sex 11 Set - 13:41

[Suporte][HTML] Teste titulo
por JUFASA Qua 9 Set - 16:42

[Naruto] Jogo para Telemóvel
por MIRISHIA Seg 31 Ago - 19:02

[Dicas] Tutorial HTML
por IsmaelS. Qua 26 Ago - 23:01

[Anime] Ansatsu Kyoushitsu
por MIRISHIA Seg 24 Ago - 17:53

[Manga] Naruto Gaiden
por MIRISHIA Seg 24 Ago - 17:31

Boruto- Novo Filme de Naruto
por Je4n Seg 24 Ago - 4:05

[Tutorial] Rank PhotoShop
por StaaL Seg 3 Nov - 23:07

[Noticia] Designer
por StaaL Seg 3 Nov - 22:13

Pedido - Banner's
por JUFASA Dom 20 Jul - 22:27

Pedido - Logotipo
por IsmaelS. Dom 20 Jul - 18:03

Um jogo bom para PS2?
por JQuery Qui 17 Jul - 21:15

[CSS] CSS Transforms
por JQuery Qui 17 Jul - 21:13

[Youtube] TheKingMoreira
por JQuery Qui 17 Jul - 20:59

[Tutorial] Assault
por JQuery Qui 17 Jul - 20:53

Copyright © 2015 - UPFórum

Top Membros do Mês
Últimos assuntos
Algum administrador?
por poison Seg 26 Jun - 20:30

Cria a tua Musica
por MIRISHIA Sex 11 Set - 13:41

[Suporte][HTML] Teste titulo
por JUFASA Qua 9 Set - 16:42

[Naruto] Jogo para Telemóvel
por MIRISHIA Seg 31 Ago - 19:02

[Dicas] Tutorial HTML
por IsmaelS. Qua 26 Ago - 23:01

[Anime] Ansatsu Kyoushitsu
por MIRISHIA Seg 24 Ago - 17:53

[Manga] Naruto Gaiden
por MIRISHIA Seg 24 Ago - 17:31

Boruto- Novo Filme de Naruto
por Je4n Seg 24 Ago - 4:05

[Tutorial] Rank PhotoShop
por StaaL Seg 3 Nov - 23:07

[Noticia] Designer
por StaaL Seg 3 Nov - 22:13

Pedido - Banner's
por JUFASA Dom 20 Jul - 22:27

Pedido - Logotipo
por IsmaelS. Dom 20 Jul - 18:03

Um jogo bom para PS2?
por JQuery Qui 17 Jul - 21:15

[CSS] CSS Transforms
por JQuery Qui 17 Jul - 21:13

[Youtube] TheKingMoreira
por JQuery Qui 17 Jul - 20:59

[Tutorial] Assault
por JQuery Qui 17 Jul - 20:53


Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

[CSS] CSS Transforms


avatar

#1
Desconectado
em Sab 24 Maio - 12:52


Originalmente postado por Diego Eis.


Há dois tipos de CSS Transforms: no formato 2D e 3D. Veremos aqui apenas o formato 2D que é o que tem mais suporte entre os browsers. Testaremos com Firefox 4, Safari 5 e Opera 10.5. Perceba que o código estará com o prefixo de cada browser para que não haja problemas em browsers que não reconheçam as propriedades que iremos aplicar.


Temos abaixo um exemplo com 3 imagens. O código HTML é o seguinte:
Código:

<ul>
    <li><img src="http://tableless.github.com/exemplos/csstransforms/images/img1.png" alt="" /></li>
    <li><img src="http://tableless.github.com/exemplos/csstransforms/images/img2.png" alt="" /></li>
    <li><img src="http://tableless.github.com/exemplos/csstransforms/images/img3.png" alt="" /></li>
</ul>

Apliquei [Diego Eis] o código CSS abaixo para que fique mais apresentável:

Código:

    body {
    background:#EFEFEF;
    }
    ul {
    width:900px;
    margin:100px auto 0;
    }
    ul li {
    display:inline-block;
    list-style:none;
    }
   
    ul li img {
    vertical-align:middle;
    border:15px solid #FFF;
    }

A propriedade transform irá modificar a forma do elemento. Abaixo vamos conhecer alguns dos valores que iremos aplicar.

scale
O valor scale modificará a dimensão do elemento. Ele aumentará proporcionalmente o tamanho do elemento levando em consideração o tamanho original do elemento.

skew
Skew modificará os angulos dos elementos.

translation
O translation moverá o elemento no eixo X e Y. O interessante é que você não precisa se preocupar com floats, positions, margins e etc. Se você aplica o translation, ele moverá o objeto e pronto.

rotate

O rotate rotaciona o elemento levando em consideração seu ângulo, especialmente quando o ângulo é personalisado com o transform-origin.

Como funciona

Scale

Adicionando o código abaixo, ao passarmos o mouse em cima das imagens, sua escala aumentará. Para entender o valor de referência da escala: 1 é o tamanho original do elemento. 2 é o dobro deste tamanho. Neste nosso exemplo diminui pela metade o tamanho da imagem ao passar o mouse aumentei em em 30%

Código:

    ul li img {
    -webkit-transform:scale(0.5); /* prefixo para browsers webkit */
    -moz-transform:scale(0.5); /* prefixo para browsers gecko */
    -o-transform:scale(0.5); /* prefixo para opera */
    transform:scale(0.5);
    }
   
    ul li img:hover {
    -webkit-transform:scale(1.3); /* prefixo para browsers webkit */
    -moz-transform:scale(1.3); /* prefixo para browsers gecko */
    -o-transform:scale(1.3); /* prefixo para opera */
    transform:scale(1.3);
    }

[Você precisa estar registrado e conectado para ver este link.]

Skew

Para testar, vamos adicionar o valor skew. Aqui não estaremos fazendo bom uso do skew, mas há exemplos bem interessantes na internet como [Você precisa estar registrado e conectado para ver este link.]

Código:

    ul li img {
    -webkit-transform:scale(0.5); /* prefixo para browsers webkit */
    -moz-transform:scale(0.5); /* prefixo para browsers gecko */
    -o-transform:scale(0.5); /* prefixo para opera */
    transform:scale(0.5);
    }
   
    ul li img:hover {
    -webkit-transform:scale(1.3) skew(30deg); /* prefixo para browsers webkit */
    -moz-transform:scale(1.3) skew(30deg); /* prefixo para browsers gecko */
    -o-transform:scale(1.3) skew(30deg); /* prefixo para opera */
    transform:scale(1.3) skew(30deg);
    }

Agora, no hover da imagem mudamos em 30 graus o ângulo. Veja [Você precisa estar registrado e conectado para ver este link.]

Translate

Substituindo o skew pelo translate, modificaremos a posição do elemento. Veja abaixo:

Código:

    ul li img {
    -webkit-transform:scale(0.5); /* prefixo para browsers webkit */
    -moz-transform:scale(0.5); /* prefixo para browsers gecko */
    -o-transform:scale(0.5); /* prefixo para opera */
    transform:scale(0.5);
    }
   
    ul li img:hover {
    -webkit-transform:scale(1.3) translate(80px, 80px); /* prefixo para browsers webkit */
    -moz-transform:scale(1.3) translate(80px, 80px); /* prefixo para browsers gecko */
    -o-transform:scale(1.3) translate(80px, 80px); /* prefixo para opera */
    transform:scale(1.3) translate(80px, 80px);
    }

[Você precisa estar registrado e conectado para ver este link.]

Rotate

E por fim, o efeito que eu acho mais legal é o rotate.
Com o código abaixo, rotacionamos o elemento em 180 graus.

Código:

    ul li img {
    -webkit-transform:scale(0.5);
    -moz-transform:scale(0.5);
    -o-transform:scale(0.5);
    transform:scale(0.5);
    }
   
    ul li img:hover {
    -webkit-transform:scale(1.3) rotate(180deg);
    -moz-transform:scale(1.3) rotate(180deg);
    -o-transform:scale(1.3) rotate(180deg);
    transform:scale(0.5) rotate(180deg);
    }

[Você precisa estar registrado e conectado para ver este link.]

Ver perfil do usuário
avatar

#2
Desconectado
em Sab 24 Maio - 13:20

Olá Convidado !

Obrigado por postar esse tutorial :D
Gostei :D

Até Mais !

Ver perfil do usuário
avatar

#3
Desconectado
em Sab 24 Maio - 13:43

Obrigado por postar xD. Fiquei a aprender um pouco mais de CSS!

Ver perfil do usuário
avatar

#4
Desconectado
em Sab 24 Maio - 20:13

Olá !

Eu Tambem muito bom o Tutorial :D

Até !

Ver perfil do usuário
avatar

#5
Desconectado
em Sab 24 Maio - 21:20

Valeu pelo tutorial, com certeza ajudou bastante, @DeeW-kun. u-u

Ver perfil do usuário
avatar

#6
Desconectado
em Qui 17 Jul - 21:13

Olá,
Obrigado por compartilhar connosco.

Até Mais...

Ver perfil do usuário

#7
Desconectado
Conteúdo patrocinado

Mensagem [Página 1 de 1]


Post relacionados