Aumente o uso da perspectiva e transforme: tradução. A exibição tradicional do produto pode não atrair bem a atenção dos usuários, mas se os elementos 3D apropriados forem adicionados à tela, talvez o efeito seja bom ~
Mapa de efeitos:
Explique: essa criatividade não é o que eu penso, mas imitando os outros, a criatividade deve estar no W3cplus. Claro, o objetivo é ensinar a todos como fazê -lo, apenas seja uma imitação alta ~
Primeiro de tudo, ensine -o a usar o CSS3 para fazer um quadrado:
Antes que haja CSS, esse cubo deve ser difícil de fazer ~ bem, acho que é difícil ~
html:
<body> <div class = wapper> <div class = cubo> <div class = signo de> 1 </div> <div class = size back> 6 </div </div> <div class = size esquerda> 3 </div> <div class = size top> 5 </div> <div class = signo de baixo> 2 </div> </div> </body>
O estágio do Wapper para esse efeito, ou seja, definindo o elemento de perspectiva. O cubo representa um cubo e, em seguida, 6 Div representa cada lado.
Div#cubo Configurações de transformação no estilo: preserve-3d e depois defina girar e traduzirz cada elemento
Agora todo o macarrão se sobrepôs no mesmo avião, desistimos:
A fonte avança para a frente, a distância da semi -margem (50px) da direção do eixo z é 50px;
Voltar primeiro gira 180 graus ao redor do eixo Y, de modo que a fonte fica para o exterior e depois traduzez (50px), porque foi girada 180 graus no momento, então Tanslatez está para baixo e está baixo, e é abaixo.
Da mesma maneira, o outro plano gira 90 graus ao redor do eixo x ou Y e depois traduz (50px)
CSS:
.wapper {margin: 100px AUTOMENTO DE AUTO; Largura de 100px; Altura: 100px; ;} .top {-webkit -transform: giratex (90deg) translatez (50px);}. 90DEG) TRANSTATEZ (50PX);} .BOTTOM {-Webkit-Transform: Rotatex (-90DEG) Tradratez (50px);} .back {-webkit-transform: girtatey (-180deg) (50px);}Para o efeito da exibição, você pode ajustar a distância da perspectiva ~
Bem, o cubo é entendido, portanto, esta exibição do produto não é difícil;
Html:
<! > <ul id = content> <li> <div class = wrapper> <img src = imagens/a.png> <span class = Information> <strong> contrato </strong> a maneira e a forma do ACT em sua loja. </Span> </div> </li> <li> <div class = wrapper> <img src = imagens/b.jpeg> <span class = Information> <strong> Formulário de contrato </strong> A maneira mais fácil de Adicione um formulário de contal à sua loja. </strong> A maneira mais fácil de adicionar um formulário de contato à sua loja.
CSS:
<Style type = text/css> Body {Font-Family: Tahoma, Arial;} #Content {Margin: 100px Auto 0;} #Content Li, #Content .Wrapper, #Content Li img, #ContentEntit Li span {Width: 310px; 88888; : 3px; : -Webkit-gradiente (linear, superior esquerdo, inferior esquerdo, parada de cor (0%, RGBA (236, 241, 244, 1)), parada de cor (100%, RGBA (190, 202, 217, 1 1 1 , 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 117, 1 1, 117, 1 1, 1 1, 117, 1 1, 1 1, 1 1, 117, 1 1, 1 1 , 117, 1 1, 1 1, 1 1, 1 1, 1 1, 117, 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 117, 1)); 6s; 255, 255, 255, 0,5); Transformar: giratex (95deg);} #Content Li: pairar img {box-shadow: Nenhum; , 0,3);O CSS foi basicamente analisado acima. Permita todo o estágio de compartilhamento de produtos, por isso adicionamos um div.wapper para ele definir o Syle Transform-Syle: Prevery-3D e, em seguida, estabelecemos a perspectiva do efeito do estágio a cada LI. O efeito final do flip está realmente no Div.Wapper.
Código fonte Clique para baixar
O acima é todo o conteúdo deste artigo.