3D Início do CSS3
Para jogar em 3D do CSS3, você deve entender vários vocabulários, como perspectiva, rotação e tradução. Perspectiva significa olhar para as coisas 2D na tela de uma perspectiva realista, mostrando assim o efeito do 3D. A rotação não é mais uma rotação no plano 2D, mas uma rotação de um sistema de coordenadas tridimensionais, incluindo eixo x, eixo y e rotação do eixo z. O mesmo vale para a tradução.
Obviamente, usando a teoria para ilustrar, você provavelmente não entende. Aqui estão 3 GIFs:
Girar ao longo do eixo x
Gire ao longo do eixo y
Gire ao longo do eixo z
Não deve haver problema com a rotação; portanto, é mais fácil entender a tradução, ou seja, mover-se no eixo x, eixo y e eixo z.
Você pode dizer que a perspectiva é difícil de entender. Deixe -me apresentar vários atributos de perspectiva.
perspectiva
O nome em inglês da perspectiva é a perspectiva. Sem essa coisa, não há como formar um efeito 3D. Mas como isso permite que nosso navegador forme um efeito 3D? Você pode olhar para a foto abaixo. De fato, aqueles que aprenderam a pintura devem conhecer o relacionamento de perspectiva, e esse é o motivo.
Mas no CSS possui valores numéricos, por exemplo, o que 1000px representa? Podemos entender dessa maneira que, se olharmos diretamente para o objeto, o objeto será esmagador e ocupará a nossa vista. Nossa distância está ficando maior e menor, e o sentido tridimensional aparecerá. De fato, esse valor constrói a distância entre nossos olhos e a tela, que também constrói uma ilusão 3D virtual.
Origin em perspectiva
Do exposto, entendemos a perspectiva e adicione o que é essa origem. O que mencionamos anteriormente é a distância do objeto, e essa é a linha de visão dos olhos. As diferentes posições do nosso ponto de vista determinam as diferentes cenas que vemos. O padrão é o centro, que é a origem em perspectiva: 50% 50%. O primeiro valor é o eixo x no qual o elemento 3D se baseia e a segunda posição é definida no eixo y.
Ao definir um atributo de origem em perspectiva para um elemento, seus elementos filhos obtêm efeitos de perspectiva, não o próprio elemento. Deve ser usado com o atributo de perspectiva e afeta apenas os elementos de conversão 3D. (W3School)
estilo de transformação
A perspectiva está aqui novamente. Sim, é a chave para 3D no CSS. O estilo de transformação é plano por padrão. Se você deseja ver o efeito 3D nos elementos, deve usar o estilo de transformação: Preserve-3D, caso contrário, é apenas uma transformação plana, não uma transformação 3D.
Leve você para brincar com CSS3-3d passo a passo
Temos um pouco de entendimento do conceito acima, então vamos iniciar o combate real abaixo!
Vejamos o efeito, não é legal: visite diretamente https://bupt-hjm.github.io/css3-3d/, se você acha que está tudo bem, lembre-se de dar a Star Hh
Etapa 1: estrutura HTML
Um recipiente muito simples é embrulhado com uma caixa de peça contendo 6 peças
<div> <div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> </div> </div>
Etapa 2: Adicione os atributos 3D necessários para entrar no mundo 3D
Através da explicação acima, você deve estar mais familiarizado com a perspectiva.
/*Container*/.Container {-Webkit -perspective: 1000px; -Moz-Perspective: 1000px; -MSSPREVA: 1000px; Perspectiva: 1000px;}/*caixa de peça*/ .Piece-box {Perspective-origin: 50% 50%; -webkit-transform-estilo: preserve-3d; -moz-transform-estilo: preservação-3d; -ms-transform-estilo: preserve-3d; estilo de transformação: preserve-3d;}Etapa 3: Adicione os estilos necessários
/*Container*/.Container {-Webkit -perspective: 1000px; -Moz-Perspective: 1000px; -MSSPREVA: 1000px; Perspectiva: 1000px;}/*caixa de peça*/. Largura: 200px; Altura: 200px; margem: 300px automático; Origina em perspectiva: 50% 50%; -webkit-transform-estilo: preserve-3d; -moz-transform-estilo: preservação-3d; -ms-transform-estilo: preserve-3d; estilo de transformação: preserve-3d;}/*peças estilo geral*/. peça {posição: absoluta; Largura: 200px; Altura: 200px; Antecedentes: vermelho; opacidade: 0.5;}.Claro, depois de concluir esta etapa, você ainda vê apenas um quadrado, que é a nossa peça-6, porque nossa transformação 3D ainda não começou
Etapa 4: ataque de transformação 3D
A primeira coisa é perceber a lanterna giratória. Não devemos deixá -lo ir primeiro, perceber a parte da luz.
Como alcançá -lo? Porque para formar um círculo, o círculo é de 360 graus e temos 6 peças, então é fácil pensar que precisamos girar cada peça em um incremento de 60 graus, e isso se torna o seguinte
Como tirá -los do centro?
Aqui, também devemos observar que, depois de girar o elemento em torno do eixo y, o eixo xe Z gira realmente, de modo que a linha vertical de cada face do cubo ainda é o eixo z. Precisamos apenas alterar o valor do tradutorz. Quando a Translatez é positiva, caminhamos em nossa direção, para que possamos separá -lo.
Mas como medir a distância?
Está claro em uma olhada?
Vamos modificar o CSS
.PriChe-1 {Background: #ff6666; -Webkit-transform: rotatey (0DEG) Tradratez (173,2px); -ms-transform: giratey (0deg) translatez (173,2px); -o-transform: giratey (0deg) translatez (173,2px); Transform: giratey (0deg) Tradlatez (173.2px);}. -Webkit-transform: rotatey (60deg) Tradratez (173,2px); -ms-transform: giratey (60deg) Tradratez (173,2px); -o-transform: giratey (60deg) Tradratez (173,2px); Transform: giratey (60deg) Tradlatez (173.2px);}. -Webkit-transform: giratey (120deg) Tradratez (173,2px); -ms-transform: giratey (120deg) Tradratez (173,2px); -o-transform: giratey (120deg) Tradratez (173,2px); -o-transform: giratey (120deg) Tradratez (173,2px); Transform: giratey (120deg) Tradlatez (173.2px);}. -Webkit-transform: girtatey (180deg) Tradratez (173,2px); -ms-transform: giratey (180deg) Tradratez (173,2px); -o-transform: giratey (180deg) Tradratez (173,2px); Transform: Rotatey (180DEG) Tradlatez (173.2px);}. -Webkit-transform: giratey (240deg) Tradratez (173,2px); -ms-transform: giratey (240deg) Tradratez (173,2px); -o-transform: giratey (240deg) Tradratez (173,2px); Transform: Rotatey (240DEG) Tradlatez (173.2px);}. -Webkit-transform: giratey (300deg) Tradratez (173,2px); -ms-transform: giratey (300deg) Tradratez (173,2px); -o-transform: giratey (300deg) Tradratez (173,2px); Transformar: giratey (300deg) Tradlatez (173,2px);}A lanterna giratória foi realizada?
Etapa 5: Animação faz mover 3D
Para alcançar a lanterna em movimento, é realmente muito simples. Só precisamos adicionar animação de rotação à caixa de peça. Complete a animação em 5 segundos, gire de 0 graus para 360 graus
/*peça de peça*/. Largura: 200px; Altura: 200px; margem: 300px automático; Origina em perspectiva: 50% 50%; -webkit-transform-estilo: preserve-3d; -moz-transform-estilo: preservação-3d; -ms-transform-estilo: preserve-3d; estilo de transformação: preservação-3d; Animação: 5s de Pouserotate; -Moz-Animação: 5s de Pouserotato; / * Firefox */ -Webkit -Animação: Pouserotate 5s; / * Safari e Chrome */ -O -Animação: Pouserotate 5s; /*Ópera*/}/*Animação da lâmpada rotativa*/@Keyframes Pouserotate {0% {-webkit-transform: giratey (0deg); -ms-transform: giratey (0deg); -o-transform: giratey (0deg); Transform: giratey (0deg);} 100% {-webkit-transform: girtatey (360deg); -ms-transform: rotatey (360deg); -o-transform: giratey (360deg); Transform: giratey (360deg);}}/ * firefox */@-moz-keyframes pouretate {0% {-webkit-transform: girtatey (0deg); -ms-transform: giratey (0deg); -o-transform: giratey (0deg); Transform: giratey (0deg);} 100% {-webkit-transform: girtatey (360deg); -ms-transform: rotatey (360deg); -o-transform: giratey (360deg); Transform: giratey (360DEG);}}/ * Safari e Chrome */@-webkit-keyframes sequerotate {0% {-webkit-transform: rotatey (0deg); -ms-transform: giratey (0deg); -o-transform: giratey (0deg); Transform: giratey (0deg);} 100% {-webkit-transform: girtatey (360deg); -ms-transform: rotatey (360deg); -o-transform: giratey (360deg); Transform: giratey (360deg);}}/ * opera */@-o-Keyframes seretate {0% {-Webkit-transform: girtatey (0DEG); -ms-transform: giratey (0deg); -o-transform: giratey (0deg); Transform: giratey (0deg);} 100% {-webkit-transform: girtatey (360deg); -ms-transform: rotatey (360deg); -o-transform: giratey (360deg); Transformar: giratey (360deg);}}Não vou colocar gifs aqui ~ hhh alcança efeitos legais? Ainda não acabou ~ mais um conjunto de cubos legais
Na verdade, não é difícil implementar um cubo. Não vou entrar em detalhes aqui. Você pode primeiro imaginar um rosto e depois expandir outros rostos para implementá -lo. Por exemplo, colocamos o front tradatez (100px) do cubo próximo ao nosso 100px e depois translatez (-100px) e depois o afastamos dos 100 px. On the left is translateX (-100px, then rotateY (90deg), on the right is translateX (100px) and then rotateY (90deg), on the top is translateY (-100px), rotateX (90deg), on the bottom is translateY (100px), rotateX (90deg), and on the bottom is translateY (100px), rotateX (90DEG).
CSS é o seguinte. O seguinte é apenas a peça1. Outros leitores podem implementá -lo por si mesmos ou olhar para o meu código -fonte do Github
.PriChe-1 {Background: #ff6666; -Webkit-transform: rotatey (0DEG) Tradratez (173,2px); -ms-transform: giratey (0deg) translatez (173,2px); -o-transform: giratey (0deg) translatez (173,2px); Transform: giratey (0deg) Tradlatez (173,2px); Animação: Piece1rotate 5s 5s; -Moz-Animação: Piece1rotate 5S 5S; / * Firefox */ -Webkit -Animação: Piece1rotate 5s 5s; / * Safari e Chrome */ -o -Animação: Piece1rotate 5s 5s; / * Opera */ -webkit-animation-thefil-mode: Forwards; / * Chrome, Safari, Opera */ Animation-Fill-Mode: Forwards; }/*FRONT*/ @KEKEFRAMES PIECT1ROTATE {0% {-Webkit-Transform: Rotatey (0DEG) Tradratez (173.2px); -ms-transform: giratey (0deg) translatez (173,2px); -o-transform: giratey (0deg) translatez (173,2px); Transform: Rotatey (0DEG) Tradlatez (173,2px);} 100% {-Webkit-transform: giratey (0deg) translatez (100px); -ms-transform: rotatey (0deg) translatez (100px); -o-transform: giratey (0deg) translatez (100px); Transform: giratey (0deg) translatez (100px);}} / * firefox * / @-moz-keyframes becel1Rotate {0% {-webkit-transform: girtatey (0deg) translatez (100px);}} / * Firefox * / @-MONKROFRASS Rotatey (0DEG) Tradratez (173,2px); -ms-transform: giratey (0deg) translatez (173,2px); -o-transform: giratey (0deg) translatez (173,2px); Transform: Rotatey (0DEG) Tradlatez (173,2px);} 100% {-Webkit-transform: giratey (0deg) translatez (100px); -ms-transform: rotatey (0deg) translatez (100px); -o-transform: giratey (0deg) translatez (100px); -o-transform: giratey (0deg) translatez (100px); Transform: giratey (0deg) Tradlatez (100px); Transform: giratey (0deg) Tradlatez (100px); Tradlatez (100px);}} / * Safari e Chrome * / @-Webkit-KeyFrames PriCE1Rotate {0% {-Webkit-Transform: Rotatey (0DEG) Tradratez (173.2px); -ms-transform: giratey (0deg) translatez (173,2px); -o-transform: giratey (0deg) translatez (173,2px); Transform: Rotatey (0DEG) Tradlatez (173,2px);} 100% {-Webkit-transform: giratey (0deg) translatez (100px); -ms-transform: rotatey (0deg) translatez (100px); -o-transform: giratey (0deg) translatez (100px); Transform: giratey (0deg) translatez (100px);}} / * opera * / @-o-KeyFrames PriCE1Rotate {0% {-webkit-transform: rotatey (0deg) translatez (173.2px); -ms-transform: giratey (0deg) translatez (173,2px); -o-transform: giratey (0deg) translatez (173,2px); -o-transform: giratey (0deg) translatez (173,2px); Transform: Rotatey (0DEG) Tradlatez (173,2px);} 100% {-Webkit-transform: giratey (0deg) translatez (100px); -ms-transform: rotatey (0deg) translatez (100px); -o-transform: giratey (0deg) translatez (100px); -o-transform: giratey (0deg) translatez (100px); Transform: giratey (0deg) Tradlatez (100px);}}Os leitores cuidadosos podem descobrir que eu usei um modo de fila de animação: para a frente;, que é realmente manter essas peças no efeito final da animação, ou seja, o efeito do cubo. Os leitores podem experimentá -lo sem tentar, e ainda será restaurado ao seu estado original.
Finalmente, o cubo gira. Nosso contêiner na frente já usou animação. Os leitores podem pensar que posso adicionar uma aula e colocar um animaiton. HHH, Animaiton cobrirá a frente e a animação da lanterna frontal desaparecerá. Então, na estrutura HTML, adicionei outra peça de embrulho de caixa, como segue
<div> <div> <div> <!-novo contêiner-> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> <//div> </div> </div> </miv> <div> </div> <//div> <///////////////2 div.
Na animação, podemos controlar o tempo de atraso da animação do cubo, ou seja, aguarde até que a montagem do cubo seja concluída antes de iniciar a animação
Animação: Boxrotate 5s 10s Infinite; O primeiro 5S é a duração da animação, os segundos 10s são o tempo de atraso e, em seguida, deixamos o cubo girar, de 0 graus para 360 graus ao redor do eixo X e também de 0 a 360 graus ao redor do eixo y.
.PriChe-box2 {-webkit-transform-estilo: preserve-3d; -moz-transform-estilo: preservação-3d; -ms-transform-estilo: preserve-3d; estilo de transformação: preservação-3d; Animação: Boxrotate 5s 10s Infinite; -Moz-Animação: Boxrotate 5s 10s Infinito; / * Firefox */ -Webkit -Animação: Boxrotate 5s 10s Infinite; / * Safari e Chrome */ -o -Animação: Boxrotate 5s 10s Infinite; /*Ópera*/}/*Animação de rotação cuboid*/@Keyframes boxrotate {0% {-webkit-transform: giratex (0deg) giratey (0deg);); -ms-transform: giratex (0deg) giratey (0deg);); -o-transform: giratex (0deg) giratey (0deg););); Transform: giratex (0deg) giratey (0deg);););} 100% {-webkit-transform: giratex (360deg) girtatey (360deg); -ms-transform: giratex (360deg) girationy (360deg); -O-transform: giratex (360deg) girationy (360deg); Transform: giratex (360deg) giratey (360deg);}}/ * firefox */@-moz-keyframes boxrotate {0% {-webkit-transform: girtatex (0deg) giratey (0deg););); -ms-transform: giratex (0deg) giratey (0deg);); -o-transform: giratex (0deg) giratey (0deg););); Transform: giratex (0deg) giratey (0deg);););} 100% {-webkit-transform: giratex (360deg) girtatey (360deg); -ms-transform: giratex (360deg) girationy (360deg); -O-transform: giratex (360deg) girationy (360deg); Transform: giratex (360deg) giratey (360deg);}}/ * safari e chrome */@-webkit-keyframes boxrotate {0% {-webkit-transform: girtatex (0deg) groatey (0deg);); -ms-transform: giratex (0deg) giratey (0deg);); -o-transform: giratex (0deg) giratey (0deg);); giratex (0deg) giratey (0deg);); Transform: giratex (0deg) giratey (0deg););} 100% {-webkit-transform: giratex (360deg) girtatey (360deg); -ms-transform: giratex (360deg) girationy (360deg); -O-transform: giratex (360deg) girationy (360deg); Transform: giratex (360deg) giratey (360deg);}}/ * opera */@-o-Keyframes boxrotate {0% {-webkit-transform: girtatex (0deg) giratey (0deg););); -ms-transform: giratex (0deg) giratey (0deg);); -o-transform: giratex (0deg) giratey (0deg);); Transform: giratex (0deg) giratey (0deg);););} 100% {-webkit-transform: giratex (360deg) girtatey (360deg); -ms-transform: giratex (360deg) girationy (360deg); -O-transform: giratex (360deg) girationy (360deg); Transformar: giratex (360deg) giratey (360deg);}}O efeito final está completo!
Os acima são exemplos de implementação do CSS 3D. Os alunos necessitados podem se referir a ele. Obrigado pelo seu apoio a este site!