
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.
Confira os últimos vídeos publicados no canal