- const DOLLS = 6
form.dolls
  - let d = 0
  while d < DOLLS
    - if (d !== (DOLLS - 1))
      input(id=`doll--${d}`, type='checkbox')
    label.doll(for=`doll--${d}`, style=`${d === 0 ? 'display: block;' : ''}`)
      span.doll__dummy
      span.doll__half.doll__half--top Top
      span.doll__half.doll__half--bottom Bottom
    - d++
  input(type="reset", id="reset")
  label(for="reset") Reset
View Compiled
:root
  --speed 0.25
  --slide-distance 60
  --base-width 100
  --base-slide calc(var(--base-width) * 1)

  @media(min-width 768px)
    --base-width 300

body
  align-items center
  background #fafafa
  display flex
  justify-content center
  min-height 100vh
  transform-style preserve-3d

::selection
  background transparent

form
  position relative
  height 200px
  width 100px

label
  display none
  
[type='checkbox']
[type='reset']
  display none
  
[for='reset']
  cursor pointer
  display block
  position fixed
  top 1rem
  right 1rem

.doll
  color #fff
  cursor pointer
  height 200px
  font-size 2rem
  position absolute
  text-align center
  width 100px

  &:nth-of-type(even)
    --bg blue
    --dummy-bg red
  &:nth-of-type(odd)
    --bg red
    --dummy-bg blue
    
  &__half
    background var(--bg)
    position absolute
    width 100%
    height 50%
    left 0
    
    &--top
      top 0
      
    &--bottom
      bottom 0

  &__dummy
    background var(--dummy-bg)
    height 100%
    width 100%
    position absolute
    top 0
    left 0
    
input:checked + label + input + label
input:checked + label + label
  display block

input:checked + label
  animation slideLeft calc(var(--speed) * 1s) forwards
  pointer-events none
  
  .doll__half--top
    animation open calc(var(--speed) * 2s) calc(var(--speed) * 1s) forwards
  
@keyframes slideLeft
  to
    transform translate(calc((var(--base-slide) * -1px) + var(--slide-distance) * -1%), 0)
    
@keyframes open
  0%
    transform translate(0, 0)
  {100 / 3%}
    transform translate(0, -100%)
  {100/ 3 * 2%}
    transform translate(-100%, -100%)
  100%
    transform translate(-100%, 100%)
  
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.