Argonalyst

Criando diagramas giratórios com HTML e CSS

Argonalyst
21 April 2023

CSS permite criar diagramas giratórios sem a necessidade de usar JavaScript ou formatos de imagens animadas. Esse recurso, que é feito apenas com HTML e CSS, pode ser útil para mostrar informações em um formato visualmente atrativo. É possível criar um cubo giratório com uma letra em cada vértice. Para isso, é necessário criar uma div para cada letra e posicionar com translate3d, mantendo o centro do cubo em x=2em e z=0em. O cubo deve ter 4em de largura e 8em de altura. A animação é feita no CSS, com uma rotação de rotateY(0turn) a rotateY(1turn) em 20 segundos. Para manter as letras sempre visíveis, é necessário criar outra div dentro de cada letra, onde é possível fazer a rotação em sentido oposto ao do cubo. É adicionado ao novo div interno a animação de un-spinning, que é de rotateY(0turn) a rotateY(-1turn). Esse recurso funciona bem em navegadores móveis e é possível até selecionar o texto giratório. É importante ressaltar que o autor do texto utilizou outras técnicas para gerar geometrias em LaTeX, que não foram mencionadas aqui.

Últimos vídeos

Confira os últimos vídeos publicados no canal

Argonalyst

Como Hackers roubaram MILHÕES em Bitcoin explorando um BUG quase invisível

Argonalyst

Os EUA proibiram esses Robôs por medo de espionagem

Argonalyst

O verdadeiro motivo pelo qual querem controlar a IA

Argonalyst

IA da OpenAI escapou do Sandbox? O que REALMENTE aconteceu

Argonalyst

A maior virada da Inteligência Artificial começou... e vem da China

Argonalyst

o ALERTA de Satya Nadella que ASSUSTOU o mercado de IA

Argonalyst

GPT 5.6 SURPREENDE: OpenAI finalmente alcançou a Anthropic?

Argonalyst

Os novos modelos de IA estão decepcionando... e ninguém quer admitir isso

Argonalyst

Midjourney quer ESCANEAR humanos e o Open Source já rivaliza com Claude Opus

Argonalyst

Rio 3.5 e Fable 5: as duas polêmicas que expõem o futuro da IA

Argonalyst

Fim dos PCs como conhecemos: Nvidia, Microsoft e IA local vão mudar tudo

Argonalyst

O plano SECRETO das Big Techs para cobrar MUITO mais pela IA

Argonalyst

BOLHA da IA ou NOVA era de crescimento EXPONENCIAL? O mercado está dividido

Argonalyst

Nova IA da OpenAI traduz em TEMPO REAL e pode mudar o mundo dos negócios

Argonalyst

Spec Driven Development (SDD): a habilidade que vai separar quem SOBREVIVE à IA