HTML5+CSS3: Álbum de Efeito Trojan 3D rotativo

O objetivo deste blog é porque a instância sedutora da instância especial HTML5 CSS3 CSS3 criou o efeito do flop 3D do Baidu Tieba.

Gráfico de efeito: Ei, tirei algumas fotos da graduação da faculdade em um trojão rotativo, girando em torno do meu grande texto e a graça do cultivo da minha alma mater ~

Os atributos de perspectiva incluem dois atributos: nenhum e o comprimento da unidade.

Entre eles, o valor padrão do atributo de perspectiva é nenhum, o que significa que o objeto 3D é visto em um ângulo ilimitado, mas parece plano. Outro valor <Langth> aceita um valor de uma unidade maior que 0. E sua unidade não pode ser percentual. Quanto maior o valor de <Langth>, mais longe o ângulo aparecer, de modo a criar uma resistência bastante baixa e uma mudança de espaço 3D muito pequena. Por outro lado, quanto menor esse valor, mais próximo o ângulo, mais próximo, de modo a criar um ângulo de alta intensidade e uma grande mudança em 3D. Para simplificar: quando as configurações de perspectiva são definidas, menor, significa que quanto mais óbvio o efeito 3D, mais próximos seus olhos estão mais próximos do objeto 3D e vice -versa.

Supondo que, quando você define a perspectiva: 300px, quanto menor o valor do tradutorz é definido, menor o tamanho do elemento filho.

1. Primeiro de tudo, o recipiente de todas as imagens é posição: absoluto, sobreposto junto e depois defina o giro de cada vez para 40*i, i = 0, 1, 2 ... 9;

2. Em seguida, defina a tradução para cada imagem do recipiente.

html:

 <! Texto/javascript src = ../../ jQuery-1.8.3.js> </sCript> <script type = text/javascript> // alert (64/math.tan (20/180 * math.pi)) ); Elemento de retorno;} $ (function () {var = -40, i = 1; $ (#container) .Click (function () {transform ($ (this) [0], giration ( + (deg * ( deg *] i ++)+deg))})});}); /1.jpg/> <pan> faça uma coisa de cada vez e faça bem .. </span> </li> <li> <img src = img/2.jpg/> <span> faça uma coisa em uma coisa em um horário, e faça bem > <Img src = img/4.jpg/> <pan> O que está fazendo a palavra que está fazendo bem. . </Span>> </span>> </span>> </span> </li> <li> <IMG SRC = IMG/6.jpg/> <span> Action Speak Louder Than Words. </SPAN > </li> <li> <img src = img/7.jpg/> <pan> nunca coloque o escritório que você pode fazer hoje até amanhã. .jpg/> <span> jack de todos os trandos e mestre de ninguém </li> </div> </body> </html "

CSS:

 li {largura: 128px; 0, 0, 0, .5); {wid th: 900px; JPG) NO-REPECIMENTO 0 0; -Transição: -webkit-transform 1s; (0DEG) Translatez (300px);} li: nth-child (1) {-webkit-traansform: girtatey (40deg) translatez (300px);} li: nth-filho (2) {-webkit-transform: rotat Ey ( 80DEG) TRANSTATEZ (300PX);} LI: NTH-CHILD (3) {-Webkit-Transform: Rotatey (120DEG) Tradlatez (300px);} Li: NTH-Child (4) {-Webkit-Transform: 16 0Deg) Translatez (300px);} li: nth-child (5) {-webkit-traansform: rotatey (200deg) translatez (300px);} li: nth-child (6) {-webkit-transform: girtatey (240deg) tradutor atez ( 300px);} li: nth-child (7) {-webkit-traansform: girtatey (280deg) translatez (300px);} li: nth-child (8) {-webkit-transform: girtatey (300px);} li: NTH-CHILD (9) {-Webkit-transform: Rotatey (360DEG) Tradratez (300px);}

O estágio DIV#é o cenário, define o conjunto de cada um dos conjuntos de li e traduzido; O valor padrão, significa que todos os sub -elementos são apresentados em planos 2D. A preservação-3D indica que todos os subelementos são apresentados no espaço 3D. Se o valor do estilo de transformação for definido como uma preservação-3D em um elemento, indica que ele não executa uma operação de exposição plana e todo o seu subelemento está localizado no espaço 3D. Em circunstâncias normais, esse atributo é usado para o elemento de execução dos efeitos de animação 3D, ou seja, usa efeitos de animação 3D, portanto seus sub -elementos devem estar no espaço 3D.

Uma coisa a prestar atenção: neste exemplo, o efeito de animação é na verdade o clique do mouse. É para girar esse trojan, então você só precisa alterar o ângulo de 40 giration do contêiner Div#a cada vez.

O acima é todo o conteúdo deste artigo.