- var line_cube_n = 13
- var cube_n = Math.pow(line_cube_n, 2)
mixin cube()
.cube
- for (var i=0; i<3; i++)
.cube__f
.scene
.plane
- for (var j=0; j < Math.sqrt(cube_n); j++)
.line
- for (var i=0; i < Math.sqrt(cube_n); i++)
+cube
View Compiled
@import 'compass'
$line-cube-n: 13
$cube-n: pow($line-cube-n, 2)
$cube-s: .4em
$cube-n-root: sqrt($cube-n)
$bg-color: #1F1A31
$p-color: blue
$s-color: red
=center
position: absolute
top: 50%
left: 50%
html, body
height: 100%
width: 100%
body
background: $bg-color
display: flex
align-items: center
justify-content: center
div
transform-style: preserve-3d
perspective: 20000px
.plane
font-size: 60px
position: relative
transform: rotateX(60deg) rotateZ(45deg)
.line
position: absolute
height: $cube-s
width: $cube-s * $cube-n-root
@for $i from 0 to $cube-n-root
&:nth-child(#{$i + 1})
top: $cube-s * $i
animation: anim 1s ease-in-out infinite $i * .1s
.cube
@for $k from 0 to $cube-n-root
&:nth-child(#{$k + 1})
$bg : mix($s-color, $p-color, random() * 70 * 1%)
background: $bg
animation: anim 1s ease-in-out infinite $k * .1s
.cube__f
@for $m from 0 to 3
&:nth-child(#{$m + 1})
@if $m < 1
background: lighten($bg, 20%)
@else if $m == 1
background: darken($bg, 10%)
.cube
height: $cube-s
width: $cube-s
position: absolute
transition: transform .1s ease-in-out
backface-visibility: hidden
@at-root
@keyframes anim
0%, 100%
transform: translateZ(0)
50%
transform: translateZ($cube-s/2)
@for $j from 0 to $cube-n-root
&:nth-child(#{$j + 1})
left: $cube-s * $j
&__f
+center
margin-top: -$cube-s/2
margin-left: -$cube-s/2
height: $cube-s
width: $cube-s
background: inherit
@for $l from 0 to 3
&:nth-child(#{$l + 1})
transform: if($l < 2,rotateY(90 * $l * 1deg), rotateX(pow(-1, $l) * -90 * 1deg)) translateZ($cube-s / 2)
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.