//<div class="mod">
<div class="cube">
<div class="faces f1">
<div class="dot p1"></div>
<div class="dot p2"></div>
<div class="dot p3"></div>
<div class="dot p4"></div>
<div class="dot p5"></div>
<div class="dot p6"></div>
<div class="dot p7"></div>
<div class="dot p8"></div>
<div class="dot p9"></div>
</div>
<div class="faces f2">
<div class="dot p10"></div>
<div class="dot p11"></div>
<div class="dot p12"></div>
<div class="dot p13"></div>
</div>
<div class="faces f3">
<div class="dot p1"></div>
<div class="dot p2"></div>
<div class="dot p3"></div>
<div class="dot p4"></div>
<div class="dot p5"></div>
<div class="dot p6"></div>
<div class="dot p7"></div>
<div class="dot p8"></div>
<div class="dot p9"></div>
</div>
<div class="faces f4">
<div class="dot p10"></div>
<div class="dot p11"></div>
<div class="dot p12"></div>
<div class="dot p13"></div>
</div>
<div class="faces f5">
<div class="dot p1"></div>
<div class="dot p2"></div>
<div class="dot p3"></div>
<div class="dot p4"></div>
<div class="dot p5"></div>
<div class="dot p6"></div>
<div class="dot p7"></div>
<div class="dot p8"></div>
<div class="dot p9"></div>
</div>
<div class="faces f6">
<div class="dot p10"></div>
<div class="dot p11"></div>
<div class="dot p12"></div>
<div class="dot p13"></div>
</div>
<div class="faces f7">
<div class="dot p1"></div>
<div class="dot p2"></div>
<div class="dot p3"></div>
<div class="dot p4"></div>
<div class="dot p5"></div>
<div class="dot p6"></div>
<div class="dot p7"></div>
<div class="dot p8"></div>
<div class="dot p9"></div>
</div>
<div class="faces f8">
<div class="dot p10"></div>
<div class="dot p11"></div>
<div class="dot p12"></div>
<div class="dot p13"></div>
</div>
<div class="faces f9">
<div class="dot p1"></div>
<div class="dot p2"></div>
<div class="dot p3"></div>
<div class="dot p4"></div>
<div class="dot p5"></div>
<div class="dot p6"></div>
<div class="dot p7"></div>
<div class="dot p8"></div>
<div class="dot p9"></div>
</div>
<div class="faces f10">
<div class="dot p10"></div>
<div class="dot p11"></div>
<div class="dot p12"></div>
<div class="dot p13"></div>
</div>
<div class="faces f11">
<div class="dot p1"></div>
<div class="dot p2"></div>
<div class="dot p3"></div>
<div class="dot p4"></div>
<div class="dot p5"></div>
<div class="dot p6"></div>
<div class="dot p7"></div>
<div class="dot p8"></div>
<div class="dot p9"></div>
</div>
</div>
<div class="project-name">
<div class="l1">project-</div>
<div class="l2">-quantum</div>
</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700,100);
@import url(https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700,300,100);
@size-cube: 210px;
@faces-interval: (@size-cube/2)/5;
@size-dot: 2px;
@delay-anim: .3s;
body {
margin: 0;
padding: 0;
background: #0033FF;
font-family: 'Roboto', sans-serif;
-webkit-text-size-adjust: none;
-webkit-font-smoothing: antialiased!important;
text-rendering: optimizeLegibility!important;
-moz-osx-font-smoothing: grayscale;
}
.mod {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
perspective: 330px;
//background: #0033FF;
background: #225CFF;
.project-name {
position: absolute;
width: @size-cube*2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 1.75em;
text-transform: uppercase;
letter-spacing: 0.5em;
text-align: center;
line-height: 1.5em;
font-family: 'Roboto Mono';
font-weight: 300;
}
.cube {
position: absolute;
top: 50%;
left: 50%;
margin-top: -@size-cube/2;
margin-left: -@size-cube/2;
width: @size-cube;
height: @size-cube;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: @size-cube/2 @size-cube/2;
animation: spinCube 9000ms linear infinite;
.faces {
position: absolute;
top: 0px;
left: 0px;
width: @size-cube;
height: @size-cube;
//animation: spinCube 4500ms linear infinite;
.dot {
position: absolute;
background: rgba(255, 255, 255, 1);
width: @size-dot;
height: @size-dot;
border-radius: 50%;
}
.p1 {
top: -@size-dot/2;
;
margin-left: -@size-dot/2;
}
.p2 {
top: -@size-dot/2;
;
left: 50%;
margin-left: - (@size-dot/2);
}
.p3 {
top: -@size-dot/2;
;
left: 100%;
margin-left: -@size-dot/2;
}
.p4 {
top: 50%;
left: -@size-dot/2;
margin-top: -@size-dot/2;
}
.p5 {
top: 50%;
left: 50%;
margin-top: -@size-dot/2;
margin-left: -@size-dot/2;
}
.p6 {
top: 50%;
left: 100%;
margin-top: -@size-dot/2;
margin-left: -@size-dot/2;
}
.p7 {
top: 100%;
left: 0%;
margin-top: -@size-dot/2;
margin-left: -@size-dot/2;
}
.p8 {
top: 100%;
left: 50%;
margin-top: -@size-dot/2;
margin-left: -@size-dot/2;
}
.p9 {
top: 100%;
left: 100%;
margin-top: -@size-dot/2;
margin-left: -@size-dot/2;
}
.p10 {
top: 25%;
;
left: 25%;
margin-top: -@size-dot/2;
margin-left: -@size-dot/2;
}
.p11 {
top: 25%;
;
left: 75%;
margin-top: -@size-dot/2;
margin-left: -@size-dot/2;
}
.p12 {
top: 75%;
;
left: 25%;
margin-top: -@size-dot/2;
margin-left: -@size-dot/2;
}
.p13 {
top: 75%;
;
left: 75%;
margin-top: -@size-dot/2;
margin-left: -@size-dot/2;
}
}
.f1 {
-webkit-transform: translateZ(-@faces-interval*5);
animation-delay: @delay-anim;
}
.f2 {
-webkit-transform: translateZ(-@faces-interval*4);
animation-delay: @delay-anim*2;
}
.f3 {
-webkit-transform: translateZ(-@faces-interval*3);
animation-delay: @delay-anim*3;
}
.f4 {
-webkit-transform: translateZ(-@faces-interval*2);
animation-delay: @delay-anim*4;
}
.f5 {
-webkit-transform: translateZ(-@faces-interval*1);
animation-delay: @delay-anim*5;
}
.f6 {
-webkit-transform: translateZ(0px);
animation-delay: @delay-anim*6;
}
.f7 {
-webkit-transform: translateZ(@faces-interval*1);
animation-delay: @delay-anim*7;
}
.f8 {
-webkit-transform: translateZ(@faces-interval*2);
animation-delay: @delay-anim*8;
}
.f9 {
-webkit-transform: translateZ(@faces-interval*3);
animation-delay: @delay-anim*9;
}
.f10 {
-webkit-transform: translateZ(@faces-interval*4);
animation-delay: @delay-anim*10;
}
.f11 {
-webkit-transform: translateZ(@faces-interval*5);
animation-delay: @delay-anim*11;
}
}
}
@-webkit-keyframes spinCube {
0% {
-webkit-transform: rotateY(0deg) rotateX(-45deg) rotate(0deg);
}
50% {
-webkit-transform: rotateY(180deg) rotateX(135deg) rotate(180deg);
}
100% {
-webkit-transform: rotateY(360deg) rotateX(315deg) rotate(360deg);
}
}
@-webkit-keyframes spinDots {
0% {
-webkit-transform: rotateX(0deg) rotateY(45deg);
}
50% {
-webkit-transform: rotateX(-180deg) rotateY(-135deg);
}
100% {
-webkit-transform: rotateX(-360deg) rotateY(-315deg);
}
}
@-webkit-keyframes spinFaces {
0% {
-webkit-transform: rotateX(0deg);
}
50% {
-webkit-transform: rotateX(180deg);
}
100% {
-webkit-transform: rotateX(0deg);
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.