A implementação de HTML5 Y CSS3 Não só proporcionou uma nova forma de padronizar os elementos de uma página, dando a possibilidade de incluir novos elementos que proporcionariam um maior grau de utilidade no desenvolvimento de aplicações web, mas também permitiu ampliar as possibilidades destes, saindo à parte línguas como JavaScript para efeitos e transições graças a CSS3.
Obviamente, existem bibliotecas de JavaScript que têm efeitos incríveis e tornam sua implementação bastante simples, mas na maioria das vezes essa funcionalidade é encapsulada e as possibilidades de modificações são muito complicadas.
Para esses casos, podemos usar CSS3 e com um pouco de trabalho podemos alcançar efeitos e funcionalidades realmente incríveis como um carrossel, algo que no passado só era possível com JavaScript.
Criando nosso carrossel
Primeiro incluiremos o código HTML para nosso carrossel, que será bastante simples, pois incluirá apenas a inclusão de nossa folha de estilo, a tag para indicar que tudo o que está dentro dele será conteúdo gráfico, como fotos, diagramas ou em neste caso, nosso carrossel:
Carrossel CSS3É importante destacar as classes que incluímos em nosso div, pois são elas que nos permitirão realizar a manipulação em nosso css. Feito isso, prosseguiremos com a implementação de nossa folha de estilo, começando primeiro por dar aos nossos elementos uma aparência 3D, para isso usaremos a propriedade perspectiva Y transformar:
.cards {posição: absoluto; topo: 50%; esquerda: 50%; largura: 190px; altura: 210px; margem: 0; -webkit-perspectiva: 800px; perspectiva: 800px; -webkit-transform: traduzir (-50%, -50%); -ms-transform: traduzir (-50%, -50%); transformar: traduzir (-50%, -50%); }Tendo isso, vamos incluir algumas animações para dar-lhe o estilo de carrossel funcionando de acordo com uma regra que definiremos mais tarde, também definimos os segundos que queremos que faça as transições, e definimos a posição das nossas cartas dentro o carrossel:
.cards__content {position: absoluto; largura: 100%; altura: 100%; -webkit-transform-style: preserve-3d; estilo de transformação: preserve-3d; -webkit-transform: translateZ (-182px) rotateY (0); transformar: translateZ (-182px) rotateY (0); -webkit-animation: carrossel 10s infinite cubic-bezier (1, 0,015, 0,295, 1,225) para a frente; animação: carrossel 10s infinite cubic-bezier (1, 0,015, 0,295, 1,225) para a frente; } .cards__element {position: absoluto; topo: 0; esquerda: 0; largura: 190px; altura: 210px; raio da borda: 6px; }Agora vamos trabalhar no cartão separadamente usando enésima criança, isso para colocar uma cor de fundo diferente para cada um deles e o tratamento das transições para eles:
.cards__element: nth-child (1) {background: # 394fd5; -webkit-transform: rotateY (0) translateZ (182px); transformar: rotateY (0) translateZ (182px); } .cards__element: n-ésimo filho (2) {background: # 39d570; -webkit-transform: rotateY (120deg) translateZ (182px); transformar: rotateY (120deg) translateZ (182px); } .cards__element: n-ésimo filho (3) {background: # f0091f; -webkit-transform: rotateY (240deg) translateZ (182px); transformar: rotateY (240deg) translateZ (182px); }Finalmente, definimos uma cor de fundo para o corpo e adicionamos nossas regras para a palavra carrossel, fazemos isso com quadros-chave que é responsável por definir o código da animação:
corpo {plano de fundo: # 6c4949; } @ -webkit-keyframes carrossel {0%, 17,5% {-webkit-transform: translateZ (-182px) rotateY (0); transformar: translateZ (-182px) rotateY (0); } 27,5%, 45% {-webkit-transform: translateZ (-182px) rotateY (-120deg); transformar: translateZ (-182px) rotateY (-120deg); } 55%, 72,5% {-webkit-transform: translateZ (-182px) rotateY (-240deg); transformar: translateZ (-182px) rotateY (-240deg); } 82,5%, 100% {-webkit-transform: translateZ (-182px) rotateY (-360deg); transformar: translateZ (-182px) rotateY (-360deg); }} carrossel @keyframes {0%, 17,5% {-webkit-transform: translateZ (-182px) rotateY (0); transformar: translateZ (-182px) rotateY (0); } 27,5%, 45% {-webkit-transform: translateZ (-182px) rotateY (-120deg); transformar: translateZ (-182px) rotateY (-120deg); } 55%, 72,5% {-webkit-transform: translateZ (-182px) rotateY (-240deg); transformar: translateZ (-182px) rotateY (-240deg); } 82,5%, 100% {-webkit-transform: translateZ (-182px) rotateY (-360deg); transformar: translateZ (-182px) rotateY (-360deg); }}Com isso pronto, vamos ver como fica nosso carrossel animado em nosso navegador:
Como podemos ver, é bastante simples, mas cumpre sua funcionalidade e o que é ainda melhor sem usar uma única linha de código no JavaScriptResta a todos pegar no exemplo e experimentá-lo um pouco, aumentando seu tamanho, adicionando imagens e mudando o estilo do carrossel, algo totalmente possível pela forma como foi construído.
