Skip to content

Instantly share code, notes, and snippets.

Created July 29, 2017 00:48
Show Gist options
  • Save anonymous/170d0fe3c5f16b0e448e16a434e7900f to your computer and use it in GitHub Desktop.
Save anonymous/170d0fe3c5f16b0e448e16a434e7900f to your computer and use it in GitHub Desktop.
JyYgWB
<div class="contenedor">
<div class="cubo">
<div class="side frente"></div>
<div class="side atras"></div>
<div class="side abajo"></div>
<div class="side arriba"></div>
<div class="side derecha"></div>
<div class="side izquierda"></div>
</div>
</div>
@keyframes rotacion {
30% {
transform: rotateX(0) rotateY(270deg) rotateZ(0deg);
}
60% {
transform: rotateX(180deg) rotateY(270deg) rotateZ(0deg);
}
90% {
transform: rotateZ(180deg) rotateX(180deg) rotateY(270deg);
}
}
.contenedor {
background:#ccc;
height: 300px;
width: 300px;
display: flex;
justify-content: center;
align-items: center;
perspective: 400px;
perspective-origin: top;
}
.cubo {
width: 100px;
height: 100px;
position: relative;
transform-style: preserve-3d;
animation: 5s rotacion;
}
.cubo:hover {
transform: rotateY(360deg) rotateX(180deg) rotateZ(180deg);
}
.side {
width: 100px;
height: 100px;
position: absolute;
opacity: 0.5;
}
.izquierda {
background: white;
transform: translateX(-50px) rotateY(90deg);
}
.derecha {
background: red;
transform: translateX(50px) rotateY(90deg) ;
}
.arriba {
background: blue;
transform: rotateX(90deg) translateZ(50px);
}
.abajo {
background: yellow;
transform: rotateX(90deg) translateZ(-50px);
}
.atras {
background: purple;
transform: translateZ(-50px);
}
.frente {
background: black;
transform: translateZ(50px);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment