Tópico pesado demais pra computadores pouco potentes ou celulares, eu avisei

Simples tópico com intuito de demonstrar a aplicação máxima do CSS3 dentro de tópicos sem infringir as regras do fórum (resumindo se da pra renderizar 3D qualquer coisa 2D é possível ), pois não quebra a organização dos elementos, nem impede a navegação, e apenas no caso exclusivo desse tópico, a deixa um pouco lenta dependendo do dispositivo (o que é a avisado no titulo para evitar tais transtornos). Aqueles que quiserem entender como funciona, me disponho a explicar, só me procurar ^^.

Atenção isso é um teste:

Código:

<style>@-moz-keyframes spinningH{from{-moz-transform:rotateX(0deg) rotateY(0deg)}to{-moz-transform:rotateX(360deg) rotateY(360deg)}}@-webkit-keyframes spinningH{from{-webkit-transform:rotateX(0deg) rotateY(0deg)}to{-webkit-transform:rotateX(360deg) rotateY(360deg)}}@-o-keyframes spinningH{from{-o-transform:rotateX(0deg) rotateY(0deg)}to{-o-transform:rotateX(360deg) rotateY(360deg)}}@-ms-keyframes spinningH{from{-ms-transform:rotateX(0deg) rotateY(0deg)}to{-ms-transform:rotateX(360deg) rotateY(360deg)}}@keyframes spinningH{from{transform:rotateX(0deg) rotateY(0deg)}to{transform:rotateX(360deg) rotateY(360deg)}}#container{-webkit-perspective:1000px;-moz-perspective:1000px;-o-perspective:1000px;-ms-perspective:1000px;perspective:1000px;-webkit-perspective-origin:50% 50%;-moz-perspective-origin:50% 50%;-moz-transform-origin:50% 50%;-o-perspective-origin:50% 50%;-ms-perspective-origin:50% 50%;perspective-origin:50% 50%}.animate{-webkit-animation:spinningH 6s infinite linear;-moz-animation:spinningH 6s infinite linear;-o-animation:spinningH 6s infinite linear;-ms-animation:spinningH 6s infinite linear;animation:spinningH 6s infinite linear}#cube{position:relative;margin:0 auto;height:400px;width:400px;-webkit-transition:-webkit-transform 2s linear;-moz-transition:-moz-transform 2s linear;-o-transition:-o-transform 2s linear;-ms-transition:-ms-transform 2s linear;transition:transform 2s linear;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-o-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d}#cube>div{position:absolute;height:300px;width:300px;padding:20px;opacity:.9;background-position:center center}#cube div:nth-child(1){-webkit-transform:translateZ(200px);-moz-transform:translateZ(200px);-o-transform:translateZ(200px);-ms-transform:translateZ(200px);transform:translateZ(200px);background-color:transparent;background-image:url(http://pokemythology.net/wp-content/uploads/2014/08/pmlogo.png);background-size:100%;background-repeat:no-repeat}#cube div:nth-child(2){-webkit-transform:rotateY(90deg) translateZ(200px);-moz-transform:rotateY(90deg) translateZ(200px);-o-transform:rotateY(90deg) translateZ(200px);-ms-transform:rotateY(90deg) translateZ(200px);transform:rotateY(90deg) translateZ(200px);background-color:transparent;background-image:url(http://pokemythology.net/wp-content/uploads/2014/08/pmlogo.png);background-size:100%;background-repeat:no-repeat}#cube div:nth-child(3){-webkit-transform:rotateY(180deg) translateZ(200px);-moz-transform:rotateY(180deg) translateZ(200px);-o-transform:rotateY(180deg) translateZ(200px);-ms-transform:rotateY(180deg) translateZ(200px);transform:rotateY(180deg) translateZ(200px);background-color:transparent;background-image:url(http://pokemythology.net/wp-content/uploads/2014/08/pmlogo.png);background-size:100%;background-repeat:no-repeat}#cube div:nth-child(4){-webkit-transform:rotateY(-90deg) translateZ(200px);-moz-transform:rotateY(-90deg) translateZ(200px);-o-transform:rotateY(-90deg) translateZ(200px);-ms-transform:rotateY(-90deg) translateZ(200px);transform:rotateY(-90deg) translateZ(200px);background-color:transparent;background-image:url(http://pokemythology.net/wp-content/uploads/2014/08/pmlogo.png);background-size:100%;background-repeat:no-repeat}#cube div:nth-child(5){-webkit-transform:rotateX(-90deg) translateZ(200px) rotate(180deg);-moz-transform:rotateX(-90deg) translateZ(200px) rotate(180deg);-o-transform:rotateX(-90deg) translateZ(200px) rotate(180deg);-ms-transform:rotateX(-90deg) translateZ(200px) rotate(180deg);transform:rotateX(-90deg) translateZ(200px) rotate(180deg);background-color:transparent;background-image:url(http://pokemythology.net/wp-content/uploads/2014/08/pmlogo.png);background-size:100%;background-repeat:no-repeat}#cube div:nth-child(6){-webkit-transform:rotateX(90deg) translateZ(200px);-moz-transform:rotateX(90deg) translateZ(200px);-o-transform:rotateX(90deg) translateZ(200px);-ms-transform:rotateX(90deg) translateZ(200px);transform:rotateX(90deg) translateZ(200px);background-color:transparent;background-image:url(http://pokemythology.net/wp-content/uploads/2014/08/pmlogo.png);background-repeat:no-repeat;background-size:100%;text-align:center}</style>

[spoiler="Atenção isso é um teste"]<div id="container"><div id="cube" class="animate"><div></div><div></div><div></div><div></div><div></div><div></div></div></div>[/spoiler]

A utilização indevida desse código por alguém sem o devido conhecimento pode causar danos ao layout que ai sim infringem as regras, use com moderação e apenas se souber o que está fazendo. Me abstenho de qualquer culpa por utilização desse código por alguém com má intenção, esse tópico tem apenas proposito demonstrativo e educacional.
Recomendado apenas para enfeite de tópicos.

Adorei a proposta! Apesar de não ter conhecimento nenhum em programação, aproveitei para tentar entender um pouco. Eu consegui mudar o tamanho do cubo e da imagem, mas estou tendo dificuldades em mudar a imagem em si, colocar outra. Na primeira tentativa, consegui reduzir a imagem alterando essa parte do código:

Código:

#cube{position:relative;margin:0 auto;height:[b]400[/b]px;width:[b]400[/b]px;-webkit-transition:-webkit-transform 2s linear

Depois consegui reduzir o cubo mudando todos os valores relativos a 200px. Porém quando fui mudar a imagem, trocando o endereço, elas desaparecem no resultado final. Poderia me dizer o que fiz de errado? Não sei nada de programação, mas de vez em quando pego alguns códigos e procuro entendê-los através de alterações.