Na semana passada lançamos aqui um desafio: recriar o cubo do iMasters e fazê-lo girar, usando apenas CSS!
Confira aqui o Desafio CSS – iMasters Cube.
Foram 14 propostas do cubo, algumas com códigos tão loucos (de criativos) que me deixaram até confuso (no sentido bom da palavra!). Dessas 14 propostas, 10 estavam corretas.
Agradeço a todos os participantes, seja acertando ou não, o importante é participar e brincar CSS. Fico muito feliz com os e-mails que recebo agradecendo pela criação dos desafios, pois me fazem pensar em fazer cada vez mais!
Segue a lista dos acertadores:
- Bruno Queiros
- Felipe Morais
- Fernando Daciuk
- Jonathan Cardoso
- Luciano Monegatto
- Luiz Tiago
- Matheus Kautzmann
- Sidnei Simmon
- Vinicios Aviva
- Wagner Moschini
Fizemos o sorteio em cima dos ganhadores utilizando o random.org, eis e os 3 ganhadores de um par de convites para o InterCon foram:
- Felipe Morais
- Bruno Queiros
- Wagner Moschini
Os demais acertadores ganharam um super desconto para usar em qualquer curso online do iMasters PRO.
Vocês devem enviar um email para redacao@imasters.com.br para saber como proceder, ok?
Show me the code!
Bom, existem diversas formas de se trabalhar em cima desse desafio, alguns usaram e abusaram das pseudo-classes before e after combinadas com bordas, outros conseguiram gerar não só as linhas e colunas, quanto os blocos laranjas apenas usando o css gradiente. Minha solução foi utilizar gradiente para fazer as linhas e o before para fazer os blocos laranjas. Vamos ao código final:
body {
background:#f6f6f6;
margin:10%;
}
#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%;
}
#imasters-cube {
position: relative;
margin: 0 auto;
height: 300px;
width: 300px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-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;
}
#imasters-cube>div {
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
opacity: 0.95;
background-image: -webkit-linear-gradient(rgb(255,255,255) 2px, transparent 2px), -webkit-linear-gradient(180deg, rgb(255,255,255) 2px, transparent 2px);
background-image: -moz-linear-gradient(rgb(255,255,255) 2px, transparent 2px), -moz-linear-gradient(180deg, rgb(255,255,255) 2px, transparent 2px);
background-image: -o-linear-gradient(rgb(255,255,255) 2px, transparent 2px), -o-linear-gradient(180deg, rgb(255,255,255) 2px, transparent 2px);
background-image: linear-gradient(rgb(255,255,255) 2px, transparent 2px),
linear-gradient(180deg, rgb(255,255,255) 2px, transparent 2px);
-webkit-background-size:100px 100px, 100px 100px;
-moz-background-size:100px 100px, 100px 100px;
background-size:100px 100px, 100px 100px;
background-position: -1px -1px;
}
#imasters-cube .front {
-webkit-transform: translateZ(150px);
-moz-transform: translateZ(150px);
-o-transform: translateZ(150px);
-ms-transform: translateZ(150px);
transform: translateZ(150px);
background-color: #1e9ca8;
}
#imasters-cube .front:after {
content: "";
display: block;
height: 98px;
width: 98px;
background:#af161a;
position:absolute;
bottom:0;
left:100px;
}
#imasters-cube .back {
-webkit-transform: rotateY(90deg) translateZ(150px);
-moz-transform: rotateY(90deg) translateZ(150px);
-o-transform: rotateY(90deg) translateZ(150px);
-ms-transform: rotateY(90deg) translateZ(150px);
transform: rotateY(90deg) translateZ(150px);
background-color: #058d9d;
}
#imasters-cube .top {
-webkit-transform: rotateY(180deg) translateZ(150px);
-moz-transform: rotateY(180deg) translateZ(150px);
-o-transform: rotateY(180deg) translateZ(150px);
-ms-transform: rotateY(180deg) translateZ(150px);
transform: rotateY(180deg) translateZ(150px);
background-color: #22b0be;
}
#imasters-cube .right {
-webkit-transform: rotateY(-90deg) translateZ(150px);
-moz-transform: rotateY(-90deg) translateZ(150px);
-o-transform: rotateY(-90deg) translateZ(150px);
-ms-transform: rotateY(-90deg) translateZ(150px);
transform: rotateY(-90deg) translateZ(150px);
background-color: #105e66;
}
#imasters-cube .bottom {
-webkit-transform: rotateX(-90deg) translateZ(150px) rotate(180deg);
-moz-transform: rotateX(-90deg) translateZ(150px) rotate(180deg);
-o-transform: rotateX(-90deg) translateZ(150px) rotate(180deg);
-ms-transform: rotateX(-90deg) translateZ(150px) rotate(180deg);
transform: rotateX(-90deg) translateZ(150px) rotate(180deg);
background-color: #22b0be;
}
#imasters-cube .bottom:after {
content: "";
display: block;
width: 98px;
position:absolute;
top:0;
bottom:0;
left:100px;
background:#f65f13;
background-image: -webkit-linear-gradient(rgb(255,255,255) 2px, transparent 2px), -webkit-linear-gradient(180deg, rgb(255,255,255) 2px, transparent 2px);
background-image: -moz-linear-gradient(rgb(255,255,255) 2px, transparent 2px), -moz-linear-gradient(180deg, rgb(255,255,255) 2px, transparent 2px);
background-image: -o-linear-gradient(rgb(255,255,255) 2px, transparent 2px), -o-linear-gradient(180deg, rgb(255,255,255) 2px, transparent 2px);
background-image: linear-gradient(rgb(255,255,255) 2px, transparent 2px),
linear-gradient(180deg, rgb(255,255,255) 2px, transparent 2px);
-webkit-background-size:100px 100px, 100px 100px;
-moz-background-size:100px 100px, 100px 100px;
background-size:100px 100px, 100px 100px;
background-position: -1px -1px;
}
#imasters-cube .left {
-webkit-transform: rotateX(90deg) translateZ(150px);
-moz-transform: rotateX(90deg) translateZ(150px);
-o-transform: rotateX(90deg) translateZ(150px);
-ms-transform: rotateX(90deg) translateZ(150px);
transform: rotateX(90deg) translateZ(150px);
background-color: #05626f;
text-align:center;
}
@-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);
}
}
@keyframes spinningH {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to{
transform: rotateX(360deg) rotateY(360deg);
}
}
Gostou? Então participe do próximo desafio!
De 0 a 10, o quanto você recomendaria este artigo para um amigo?