CSS Flipping Text 🍳

css-flipping-text.markdown

CSS Flipping Text 🍳

Ticking off some pen ideas. This one was to illustrate how to implement a repeat delay in vanilla CSS.

Enjoy!

A Pen by Jhey on CodePen.

License.

index.pug

- const word = 'Flip!'
.scene(style=`--hue: ${Math.random() * 360}; --saturation: ${Math.floor(Math.random() * 50 + 1) + 50}; --lightness: ${Math.floor(Math.random() * 25) + 50}`)
  .word
    - for (const [index, letter] of word.split('').entries())
      .letter__wrap(style=`--index: ${index}`)
        .letter(data-letter=letter)
          span.letter__panel(aria-hidden='true')= letter
          span.letter__panel(aria-hidden='true')= letter
          span.letter__panel= letter
          span.letter__panel

script.babel

// 404

style.stylus

*
  box-sizing border-box
  transition all .15s ease 0s

:root
  --movement 0.85
  --stop 0.5
  --duration calc((var(--movement) * (1 / var(--stop))))
  --stagger 0.1125
  --perspective 500
  --size 50
  --ease cubic-bezier(1, -0.52, .26, .89)
  --bg hsl(0, 0%, 90%)
  --panel hsl(0, 0%, 100%)
  --color hsl(0, 0%, 5%)
  --hue 23
  --saturation 100
  --lightness 55

  @media(prefers-color-scheme dark)
    --bg hsl(0, 0%, 10%)
    --panel hsl(0, 0%, 0%)
    --color hsl(0, 0%, 95%)

body
  align-items center
  background var(--bg)
  display flex
  justify-content center
  min-height 100vh

.scene
  perspective calc(var(--perspective) * 1px)

.word
  display flex
  transform rotateX(-30deg) rotateY(45deg)
  transform-style preserve-3d

.letter__wrap
  animation flip calc(var(--duration) * 1s) calc((var(--stagger, 0) * var(--index, 0)) * 1s) var(--ease) infinite
  transform-origin bottom center
  transform-style preserve-3d

  .letter
    animation rotate calc(var(--duration) * 1s) calc((var(--stagger, 0) * var(--index, 0)) * 1s) ease infinite


.letter
  color var(--color)
  font-family -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
  font-size 2rem
  font-weight bold
  height calc(var(--size) * 1px)
  margin-right calc(var(--size) * 0.2px)
  position relative
  text-transform uppercase
  transform-style preserve-3d
  width calc(var(--size) * 1px)

  &__panel
    align-items center
    background var(--panel)
    border '5px hsl(%s, %s, %s) solid' % (var(--hue) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%))
    display flex
    height calc(var(--size) * 1px)
    justify-content center
    left 50%
    position absolute
    top 50%
    width calc(var(--size) * 1px)

    &:nth-of-type(1)
      transform translate3d(-50%, -50%, 0) rotateX(90deg) translate3d(0, 0, calc(var(--size) * 0.5px))
    &:nth-of-type(2)
      transform translate3d(-50%, -50%, calc(var(--size) * 0.5px)) rotateX(0deg)
    &:nth-of-type(3)
      transform translate3d(-50%, -50%, 0) rotateX(-90deg) translate3d(0, 0, calc(var(--size) * 0.5px))
    &:nth-of-type(4)
      transform translate3d(-50%, -50%, 0) rotateY(-90deg) translate3d(0, 0, calc(var(--size) * 0.5px))


@keyframes rotate
  0%, 22.5%
    transform rotateX(0deg)
  32.5%, 50%, 100%
    transform rotateX(90deg)

@keyframes flip
  0%, 50%, 100%
    transform scaleX(1) scaleY(1) translate(0, 0)
  15%
    transform scaleX(1.2) scaleY(0.8) translate(0, 0)
  25%
    transform scaleX(0.9) scaleY(1.1) translate(0, -100%)