<link rel="stylesheet" type="text/css" href="style.css" media="all"/>
<section class="container">
<div id="cube">
<figure class="front">1</figure>
<figure class="back">2</figure>
<figure class="right">3</figure>
<figure class="left">4</figure>
<figure class="top">5</figure>
<figure class="bottom">6</figure>
</div>
</section>
.container {
width: 200px;
height: 200px;
position: relative;
perspective: 1000px;
margin:55px auto
}
#cube {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
}
#cube figure {
margin: 0;
width: 196px;
height: 196px;
display: block;
position: absolute;
border: 2px solid black;
background: rgba(14, 76, 214, 0.5);
}
#cube .front { transform: rotateY( 0deg ) translateZ( 100px ); }
#cube .back { transform: rotateX( 180deg ) translateZ( 100px ); }
#cube .right { transform: rotateY( 90deg ) translateZ( 100px ); }
#cube .left { transform: rotateY( -90deg ) translateZ( 100px ); }
#cube .top { transform: rotateX( 90deg ) translateZ( 100px ); }
#cube .bottom { transform: rotateX( -90deg ) translateZ( 100px ); }
#cube { animation: rotate 10s linear infinite; }
@keyframes rotate{
to{
transform: rotateX(360deg) rotateY(360deg);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.