2.a. Visualizing the scene transform 🚀

2-a-visualizing-the-scene-transform.markdown

2.a. Visualizing the scene transform 🚀

A Pen by substance on CodePen.

License.

index.pug

h1 Tap!
input#checker.sr-only(type="checkbox")
label(for="checker")
.transform
  span rotateX(-24deg)
  span rotateY(32deg)
  span rotateX(90deg)
  span translateZ(calc(var(--depth) + var(--stack-height)) * -1)
- const RING_COUNT = 10;
.container
  .scene
    .plane(style=`--ring-count: ${RING_COUNT}`)
      - let rings = 0;
      while rings < RING_COUNT
        .ring(style=`--index: ${rings};`)
        - rings++;

style.stylus

@property --rotate-x
  initial-value 0deg
  inherits false
  syntax '<angle>'

@property --rotate-y
  initial-value 0deg
  inherits false
  syntax '<angle>'
  
@property --flatten
  initial-value 0deg
  inherits false
  syntax '<angle>'
  
@property --translate-z
  initial-value 0
  inherits false
  syntax '<length>'


:root
  --border-width 1.2vmin
  --depth 20vmin
  --stack-height 6vmin
  --scene-size 20vmin
  --ring-size calc(var(--scene-size) * 0.6)
  --plane radial-gradient(hsla(0, 0%, 0%, 0.1) 50%, transparent 65%)
  --ring-shadow hsla(0, 0%, 0%, 0.5)
  --hue-one 320
  --hue-two 210
  --blur 10px
  --speed 1.2s
  --bg hsl(0, 0%, 98%)
  --ring-filter brightness(1) drop-shadow(0 0 0 var(--accent))
  --transition 0.5s

label
  position fixed
  height 100vmax
  width 100vmax
  top 50%
  left 50%
  z-index 4
  transform translate(-50%, -50%)
  
.sr-only
  position absolute
  width 1px
  height 1px
  padding 0
  margin -1px
  overflow hidden
  clip rect(0, 0, 0, 0)
  white-space nowrap
  border-width 0

*
  box-sizing border-box
  transform-style preserve-3d
  
h1
  font-family sans-serif
  font-size 3rem
  position fixed
  bottom 2rem
  right 2rem
  color hsl(0, 0%, 15%)
  margin 0
  
body
  display grid
  place-items center
  min-height 100vh
  overflow hidden
  
.transform
  display flex
  align-items center
  justify-content center
  position absolute
  flex-wrap wrap
  top 50%
  gap 0.5rem
  transform translate3d(0, -20vmin, 200vmin)
  z-index 3
  
  span
    background hsla(0, 0%, 10%, 0.85)
    padding 0.5rem
    border-radius 0.5rem
    opacity var(--opacity, 0)
    transition opacity var(--transition)
    transition-delay var(--delay, 0)
    font-family sans-serif
    font-weight bold
    color hsl(0, 0%, 100%)
    white-space nowrap
    
    &:nth-of-type(1)
      --delay calc(var(--transition) * 3)
    &:nth-of-type(2)
      --delay calc(var(--transition) * 2)
    &:nth-of-type(3)
      --delay var(--transition)
    &:nth-of-type(4)
      --delay 0s
  
.container
  height var(--scene-size)
  width var(--scene-size)
  transform translate3d(0, 0, 100vmin) rotateX(var(--rotate-x)) rotateY(var(--rotate-y)) rotateX(var(--flatten)) translateZ(var(--translate-z)) rotate(0deg)
  transition --rotate-x var(--transition) calc(var(--transition) * 3), --rotate-y var(--transition) calc(var(--transition) * 2), --flatten var(--transition) var(--transition), --translate-z var(--transition) 0s   
 
:checked ~ .container
  --rotate-x -24deg
  --rotate-y 32deg
  --flatten 90deg
  --translate-z calc((var(--depth) + var(--stack-height)) * -1)
  transition --rotate-x var(--transition) 0s, --rotate-y var(--transition) var(--transition), --flatten var(--transition) calc(var(--transition) * 2), --translate-z var(--transition) calc(var(--transition) * 3)

:checked ~ .transform
  --opacity 1
  
  span
    &:nth-of-type(4)
      --delay calc(var(--transition) * 3)
    &:nth-of-type(3)
      --delay calc(var(--transition) * 2)
    &:nth-of-type(2)
      --delay var(--transition)
    &:nth-of-type(1)
      --delay 0s
  
.scene
.plane
  height 100%
  width 100%
  position relative
  
.scene
  background hsla(280, 80%, 50%, 0.25)

.plane
  background hsla(200, 80%, 50%, 0.25)
  transform translate3d(0, 0, var(--depth))