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.
Assunto: Tópico pesado demais pra computadores pouco potentes ou celulares, eu avisei 
Dom 21 Dez 2014 - 15:54
Alerta
