20 exemplos extraordinários de CSS 3D

UX desenvolvedor Paul Hayes mostra o que você pode fazer com o poder de transformações CSS3 3D. Ele cobre tudo, desde galerias de imagens 3D e transições sutis para experimentais ambientes 3D

Cantos vermelhos, gradientes e sombras são características bem conhecidas do CSS3, mas, além destes, existem mentir transições CSS, transforma e animações. Em combinação eles criam efeitos nunca antes possível.
Transforma CSS 3D são hardware, suave acelerado e simples de implementar, com os navegadores de assumir o que seria cálculos perspectiva muito difíceis.

Eles existem desde 2009 e são suportados no Safari e Chrome, e logo no Firefox e Internet Explorer 10 10. Eles realizar soberbamente em dispositivos iOS, mesmo no iPhone 3G e iPad.

Aqui estão alguns exemplos fantásticos para você começar e para ilustrar novo poder CSS e gracefulness.ound

1. Entendimento CSS 3D

Em seu artigo Entendimento CSS 3D Dirk Weber explica os passos necessários para criar algo com transformações 3D. Com uma animação borboleta belamente simples e uma caixa de areia para brincar com propriedades de transformação, este é um bom lugar para começar.

2. Cubo 3D

Começando com o básico, transformações 3D são muitas vezes utilizados para reorganizar os elementos em formas geométricas. Na minha experiência de seis faces do cubo formam um cubóide. Bônus incluem clique e arraste e suporte a gestos para girar o cubo.

3. Manipulação de geometria 3D

Você pode ter notado no primeiro cubo que quando está totalmente rodado as interações de mouse estão invertidos e intuitiva, o cubo se move de maneira errada. Joe Lambert explica como evitar essas armadilhas usando WebKitCSSMatrix para determinar o vetor de rotação correta. Material inteligente!

4. Objeto-rotação natural

Geometria 3D é difícil. Dirk exemplo de rotação aborda rotação 3D natural, com a introdução do ‘trackball virtual “, uma esfera imaginária que cliques do mouse para criar mapas de rotação suave e intuitiva de um objeto 3D. Ele demonstra com um belo pacote de tiro e reflexão.

5. Poster Circle and Morphin’ Power Cubes

Quase tão antiga quanto a CSS 3D transforma-se, estes exemplos mostrar seu poder e simplicidade. O blog apresenta transforma com uma visão geral da especificação de transformação 3D, incluindo detalhes de backface visibilidade e transformar-estilo.

6. Esfera 3D e Tetrahedron

Arranjando elementos no espaço 3D pode levar a uma variedade de formas. Uma lista de elementos dispostos em círculo em torno do eixo Y e um conjunto destes disposta em torno do eixo X cria uma esfera. Triângulos CSS pode ser construído usando um truque border-width/border-color, tomar quatro delas e você pode construir um tetraedro.

7. Um conceito FPS 3D

Neste experimento Keith Clark testa a viabilidade de ambientes 3D usando apenas HTML e CSS. Use a teclas W e S e mouse para mover um escritório neste shooter pessoa rudimentar, mas muito legal primeiro. Ele funciona melhor no Safari. Certifique-se de verificar o código-fonte.

8. VR

Sobre um tema semelhante, a Apple tem a sua demonstração de tecnologia própria Safari que posiciona um visor dentro de um cubo para criar um cenário virtual. Use o mouse para clicar e arrastar e explorar a loja da Apple. Os links de demonstração para uma série de recursos úteis, como o Safari guia Efeitos visuais excelentes.

9. Web Galeria

Como parte da tecnologia da Apple mostrar que eles criaram uma galeria de imagens completa com transições e transformações, tanto em 2D e 3D. Clique ao lado e anterior nas imagens para girar um carrossel de imagens 3D. Há muitas sutilezas sutis que podem ser encontrados aqui, como imagens desaparecendo e desfoque quando outro está selecionado.

10. Transições de Foto

Tal como acontece com todas as demos da Apple este é melhor visualizado no Safari. Estas transições realmente ilustram a capacidade 3D ​​CSS para criar interações do usuário únicas, mas intuitivo na sua página web. Aqui imagens dobre, ampliar e desaparecer em um slideshow impressionante. A fonte CSS contém vale a pena estudar.

11. Fluxo

Joe Lambert criou imagem inteligente que muitos transições de imagens, com vários usando transformações 3D. Ele, muito gentilmente fornecido los em uma útil WordPress Flux plug-in chamado. Agora você pode rapidamente deixar cair estas animações legais em seu blog.

12. Pilha de neves

Como um exemplo de hardware do Snow Leopard acelerou transformações 3D, Charles Ying lançado esta galeria de imagens lindo chamado Stack Neve. Use as setas do teclado para se mover ao longo da parede ea barra de espaço para marcar a imagem. Ele executa muito bem e é um prazer absoluto de usar. Este é transformações 3D no seu melhor.

13. CSS3 Time Machine

Joe Critchley tomou de interface da Apple máquina do tempo e reproduziu com HTML e CSS para criar um slideshow de imagem. Anima-lo muito bem os atacantes vista, desaparecendo a imagem mais à frente para revelar a pessoa por trás. Algumas interações teclado que percorrer um longo caminho também.

14. The Matrix Revolutions

Na série Dirk Weber transformação 3D que mergulha profundamente no complicado mundo de transformações de matriz (-webkit-transform: Matrix3D) para criar um efeito de fluxo elegante capa. Como antes, há uma caixa de areia para brincar com propriedades; valores deste tempo matriz e perspectiva. Atenção, algumas matemática necessária.

15. Maravilha Webkit

Israel Pastrana também usou transformações de matrizes complexas, desta vez para criar uma parede de maravilha. Como você passa o mouse sobre o livro cobre a superfície responde e distorce. Clicando em um zoom de livro em uma vista de detalhes em grande estilo. A matriz e bibliotecas JavaScript aqui são especialmente vale a pena aprofundar em.

16. BigText

Leatherman Zach criou o jQuery BigText excelente plug-in que torna o texto caber uma determinada largura para alinhamento vertical bonito. Ele vem com 3D também, para o seu tipo de lindo pode desaparecer na distância, assim como o preâmbulo de Star Wars, se assim o desejar. Jogar com a demonstração de configurações aleatórias em 3D para ver o que é possível.

17. Reeder para Mac

Visite Reeder (o aplicativo dando nova vida ao RSS feeds) local no Safari e usar a sua navegação. Você vai ver o seu logotipo em forma de caixa magicamente saltar e girar para diferentes pontos de vista em uma animação maravilhosamente suave. Um exemplo fantástico de 3D ​​CSS em ação.

18. Pânico – Transmitir

Outro bastião da Mac App design, Pânico, ter usado um cartão rápido, mas inteligente aleta efeito toswitch entre uma tela e uma lista de Transmissão 4 características. Aqui 3D transforma acrescentar que pouco toque de classe, reproduzindo um efeito app nativo na web.

19. Beercamp 2011

Construído por nclud, esta experiência de Iniciação para SXSW 2011 Beercamp usa 3D transforma a viajar através de camadas de conteúdo como você rolar ou navegar. Uma tradução simples no eixo z colocar com grande efeito, com um retorno inteligente 2D transformar para navegadores que não possuem suporte. Detecção 3D utiliza Modernizr.

20. 3D Moléculas girando no iPhone / iPad

3D A aplicação deliciosamente diferente, jackadam ter usado transforma para tornar estruturas complicatedmolecular, que podem ser girados usando um mouse ou gestos. O artigo destaca algumas das vantagens 3D CSS tem sobre tela, ou seja, a aceleração de hardware no iPad (apesar iOS5 melhorou este).

 

wiliamluis

Comment (2)
Hyago Lucas
15 de junho de 2013

Muito interessante seu trabalho, gostaria de receber dicas para usar o CSS.

Responder
wiliamluis
16 de junho de 2013

Muito obrigado por acessar o site, não deixe de colocar suas dúvidas aqui =).

Responder

Deixe sua resposta