Isometric experiment

index.html

mixin parts(n, deepness)
  if deepness > 0
    - for (var i = 0; i < n; i++)
      .part= ''
        +parts(n, deepness - 1)
      
.base.part
  +parts(4, 3)

Isometric experiment.markdown

Isometric experiment

A Pen by wontem on CodePen.

License.

style.css

$parts: 4
$z: 0.06em

@mixin center
  position: absolute
  margin: auto
  top: 0
  right: 0
  left: 0
  bottom: 0
  

html, body
  overflow: hidden
  width: 100%
  height: 100%
  background: #122649
  user-select: none

.base
  @include center
  font-size: 300px
  //perspective: 400
  transform: rotateX(60deg) rotateZ(45deg)
  
.part
  width: 1em
  height: 1em
  position: absolute
  transform-style: preserve-3d
  backface-visibility: hidden
  
  //&:empty

  .part
    font-size: 0.5em
    transform-origin: 100% 100% (-$z)
    
    &::after, &::before
      content: ''
      display: block
      position: absolute
    
    &::before
      width: 100%
      height: $z
      transform-origin: 50% 100%
      bottom: 0
      transform: rotateX(90deg)
      background: #00326B
    
    &::after
      width: $z
      height: 100%
      right: 0
      transform-origin: 100% 50%
      transform: rotateY(-90deg)
      background: #004298
    

    transform: scale3d(1, 1, 1) translateZ($z / 2)
    transition: transform 0.8s, background 0.8s, box-shadow 0.8s
    &:hover
      transform: scale3d(1, 1, 2) translateZ($z / 4)  
      transition: transform 0.2s, background 0.8s, box-shadow 0.8s
    
    &:empty
      cursor: pointer
      &:active
        background: #fff !important // sorry
        box-shadow: 0 0 0.5em #fff
        transition: transform 0.8s, background 0.1s, box-shadow 0.1s
    
    &:nth-child(1)
      top: 0
      left: 0
    &:nth-child(2)
      top: 0
      right: 0
    &:nth-child(3)
      bottom: 0
      right: 0
    &:nth-child(4)
      bottom: 0
      left: 0
  
  
    @for $i from 1 through $parts
      &:nth-child(#{$i}):empty
        background: hsl(10 * $i + 180, 80%, 50%)