mixin flaps
  .package__flap.package__flap--top
  .package__flap.package__flap--bottom

mixin side
  .package__side(class=`package__side--${attributes.class || 'side'}`)
    +flaps
    if block
      block

input#package(type="checkbox")
input#one(type="radio", name="size")
label.size-label.one(for="one") S
input#two(type="radio", name="size", checked)
label.size-label.two(for="two") M
input#three(type="radio", name="size")
label.size-label.three(for="three") L
input#four(type="radio", name="size")
label.size-label.four(for="four") XL
label.close(for="package") Close /
label.open(for="package") Open

.scene
  .package__wrapper
    .package
      +side.main
        +side.tabbed
        +side.extra
          +side.flipped
View Compiled
:root
  --bg hsl(180, 20%, 92%) 
  --face-1 hsl(28, 41%, 57%)
  --face-2 hsl(29, 58%, 66%)
  --face-3 hsl(30, 69%, 70%)
  --face-4 hsl(31, 82%, 74%)
  --face-5 hsl(30, 72%, 70%)
  --face-6 hsl(21, 75%, 28%)
  --flap-one hsl(32, 76%, 70%)
  --flap-two hsl(32, 76%, 74%)
  --flap-three hsl(32, 72%, 72%)
  --flap-four hsl(32, 78%, 76%)
  --flap-five hsl(32, 78%, 72%)

*
*:after
*:before
  box-sizing border-box
  transform-style preserve-3d
  
body
  background var(--bg)
  min-height 100vh
  display grid
  place-items center
  perspective 100vmin
  overflow hidden
  
input
label
  position fixed
  top var(--t, 1rem)
  left var(--l, 1rem)
  
label
  --l 2rem
  
.open
  --l 5.5rem
  
#one
[for="one"]
  --t 2.5rem
#two
[for="two"]
  --t 4rem
#three
[for="three"]
  --t 5.5rem
#four
[for="four"]
  --t 7rem  

#package:checked ~ .scene
  --packaged 1

#one:checked ~ .scene
  --height 10
  --width 20
  --depth 20

#two:checked ~ .scene
  --height 20
  --width 20
  --depth 20

#three:checked ~ .scene
  --height 20
  --width 30
  --depth 20  

#four:checked ~ .scene
  --height 30
  --width 20
  --depth 30
  
.scene
  transform rotateX(calc(var(--rotate-x, -24) * 1deg)) rotateY(calc(var(--rotate-y, -32) * 1deg)) rotateX(90deg) translate3d(0, 0, calc(var(--height, 20) * -0.5vmin))
  
  *
  *:after
    --no-of-steps 15
    --step-delay calc(var(--step, 1) - ((1 - var(--packaged, 0)) * (var(--step) - ((var(--no-of-steps) + 1) - var(--step)))))
    transition transform calc(var(--speed, 0.2) * 1s) calc((var(--step-delay) * var(--delay, 0.2)) * 1s)

    
.package__side--extra
  --step 1
.package__side--tabbed
  --step 2
.package__side--flipped
.package__side--tabbed:after
  --step 3
.package__side--extra > .package__flap--bottom
  --step 4
.package__side--tabbed > .package__flap--bottom
  --step 5
.package__side--main > .package__flap--bottom
  --step 6
.package__side--flipped > .package__flap--bottom
  --step 7
  
.package__wrapper
  --step 8
  
.package
  --step 9
  
.package__side--extra > .package__flap--top
  --step 12
.package__side--tabbed > .package__flap--top
  --step 13
.package__side--main > .package__flap--top
  --step 14
.package__side--flipped > .package__flap--top
  --step 15
    
.package
  height calc(var(--height, 20) * 1vmin)
  width calc(var(--width, 20) * 1vmin)
  transform-origin 50% 100% 
  transform rotateX(calc(var(--packaged, 0) * -90deg))

  &__wrapper
    transform translate(0, calc((var(--packaged, 0) * var(--depth, 20)) * -1vmin))
  
  &__flap
    width 99.5%
    height 49.5%
    background var(--flap-bg, var(--face-4))
    position absolute
    left 50%
    transform translate(-50%, 0) rotateX(calc((var(--packaged, 0) * var(--rotation, -90)) * 1deg))

    &--top
      transform-origin 50% 100%
      bottom 100%

    &--bottom
      --rotation 90
      top 100%
      transform-origin 50% 0%


  &__side
    height calc(var(--height, 20) * 1vmin)
    position absolute
    top 0

    &:not(.package__side--main)
    &:not(.package__side--main):after
      transform rotateY(calc((var(--packaged, 0) * var(--rotation, 90)) * 1deg))

    &--extra
    &--tabbed
      & > .package__flap--bottom
        top 98%
      & > .package__flap--top
        bottom 98%

    &--main
      background var(--face-5)
      left 50%
      top 50%
      transform translate(-50%, -50%) translate3d(0, 0, 0)
      width calc(var(--width, 20) * 1vmin)


      & > .package__flap
        height calc(var(--depth, 20) * 0.495vmin)

    &--tabbed
      --rotation -90
      left 100%
      background var(--face-2)
      width calc(var(--depth, 20) * 1vmin)
      transform-origin 0% 50%

      & > .package__flap
        height calc(var(--width, 20) * 0.495vmin)
        --flap-bg var(--face-3)

      &:after
        content ''
        position absolute
        left 99.5%
        height 100%
        width 10%
        background var(--face-3)
        $clip = polygon(0 0%, 100% 20%, 100% 80%, 0 100%)
        clip-path $clip
        -webkit-clip-path $clip
        transform-origin 0% 50%

    &--extra
      right 100%
      background var(--face-2)
      width calc(var(--depth, 20) * 1vmin)
      transform-origin 100% 50%

      & > .package__flap
        height calc(var(--width, 20) * 0.495vmin)
        --flap-bg var(--face-3)

    &--flipped
      background var(--face-3)
      right 100%
      width calc(var(--width, 20) * 1vmin)
      transform-origin 100% 50%

      & > .package__flap
        height calc(var(--depth, 20) * 0.495vmin)
        --flap-bg var(--face-4) 
          
    &--extra > .package__flap.package__flap--top
      --flap-bg var(--flap-one)
    &--extra > .package__flap.package__flap--bottom
      --flap-bg var(--flap-two)
    &--tabbed > .package__flap.package__flap--bottom
      --flap-bg var(--flap-three)
    &--flipped > .package__flap.package__flap--bottom
      --flap-bg var(--flap-four)
    &--main > .package__flap.package__flap--top
      --flap-bg var(--flap-five)
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.