Old school D3 from simpler times

All examples By author By category About

aubergene

Full window Github gist

Rotating squares

Uniqlo had an instore promotional video using an effect similar effect to this. I manually created this using keyframe animations, but if I did it again I'd probably use JavaScript and CSS transitions, and allow people to type their own words.

<!DOCTYPE html>
<html>
<head>
  <title>Rotating Squares</title>
</head>
<body>

<div class="container">
  <div class="box box1">
    <div class="boxN">H</div>
    <div class="boxR">W</div>
  </div>

<div class="box box1">
    <div class="boxN">E</div>
    <div class="boxR">O</div>
  </div>

<div class="box box1">
    <div class="boxN">L</div>
    <div class="boxR">R</div>
  </div>

<div class="box box1">
    <div class="boxN">L</div>
    <div class="boxR">L</div>
  </div>

<div class="box box1">
    <div class="boxN">O</div>
    <div class="boxR">D</div>
  </div>
</div>

<style type="text/css">
  body {
    margin: 0;
    background: #eee;
  }

.container {
    width: 960px;
    height: 500px;
    background: #fff;
  }

.box {
    background: #000;
    color: #fff;
    display: inline-block;
    text-align: center;
    font-size: 120px;
    line-height: 130px;
    font-family: sans-serif;
    text-transform: uppercase;
    font-weight: 900;
    width: 128px;
    height: 128px;
    margin: 128px 28px;
    position: relative;
  }

.box1 {
    -moz-animation-name: rotateScale;
    -webkit-animation-name: rotateScale;
    animation-name: rotateScale;
    -moz-animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
  }
  .boxN,
  .boxR {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    -moz-animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
  }
  .boxN {
    -moz-animation-name: hideShow;
    -webkit-animation-name: hideShow;
    animation-name: hideShow;
  }
  .boxR {
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -moz-animation-name: showHide;
    -webkit-animation-name: showHide;
    animation-name: showHide;
  }
  @-moz-keyframes rotateScale {
    45% {
      -moz-transform: rotate(0deg) scale(1);
      -webkit-transform: rotate(0deg) scale(1);
      transform: rotate(0deg) scale(1);
    }

50% {
      -moz-transform: rotate(45deg) scale(1.3);
      -webkit-transform: rotate(45deg) scale(1.3);
      transform: rotate(45deg) scale(1.3);
    }

55% {
      -moz-transform: rotate(90deg) scale(1);
      -webkit-transform: rotate(90deg) scale(1);
      transform: rotate(90deg) scale(1);
    }

100% {
      -moz-transform: rotate(90deg) scale(1);
      -webkit-transform: rotate(90deg) scale(1);
      transform: rotate(90deg) scale(1);
    }
  }
  @-webkit-keyframes rotateScale {
    45% {
      -moz-transform: rotate(0deg) scale(1);
      -webkit-transform: rotate(0deg) scale(1);
      transform: rotate(0deg) scale(1);
    }

50% {
      -moz-transform: rotate(45deg) scale(1.3);
      -webkit-transform: rotate(45deg) scale(1.3);
      transform: rotate(45deg) scale(1.3);
    }

55% {
      -moz-transform: rotate(90deg) scale(1);
      -webkit-transform: rotate(90deg) scale(1);
      transform: rotate(90deg) scale(1);
    }

100% {
      -moz-transform: rotate(90deg) scale(1);
      -webkit-transform: rotate(90deg) scale(1);
      transform: rotate(90deg) scale(1);
    }
  }
  @-o-keyframes rotateScale {
    45% {
      -moz-transform: rotate(0deg) scale(1);
      -webkit-transform: rotate(0deg) scale(1);
      transform: rotate(0deg) scale(1);
    }

50% {
      -moz-transform: rotate(45deg) scale(1.3);
      -webkit-transform: rotate(45deg) scale(1.3);
      transform: rotate(45deg) scale(1.3);
    }

55% {
      -moz-transform: rotate(90deg) scale(1);
      -webkit-transform: rotate(90deg) scale(1);
      transform: rotate(90deg) scale(1);
    }

100% {
      -moz-transform: rotate(90deg) scale(1);
      -webkit-transform: rotate(90deg) scale(1);
      transform: rotate(90deg) scale(1);
    }
  }
  @-ms-keyframes rotateScale {
    45% {
      -moz-transform: rotate(0deg) scale(1);
      -webkit-transform: rotate(0deg) scale(1);
      transform: rotate(0deg) scale(1);
    }

50% {
      -moz-transform: rotate(45deg) scale(1.3);
      -webkit-transform: rotate(45deg) scale(1.3);
      transform: rotate(45deg) scale(1.3);
    }

55% {
      -moz-transform: rotate(90deg) scale(1);
      -webkit-transform: rotate(90deg) scale(1);
      transform: rotate(90deg) scale(1);
    }

100% {
      -moz-transform: rotate(90deg) scale(1);
      -webkit-transform: rotate(90deg) scale(1);
      transform: rotate(90deg) scale(1);
    }
  }
  @keyframes rotateScale {
    45% {
      -moz-transform: rotate(0deg) scale(1);
      -webkit-transform: rotate(0deg) scale(1);
      transform: rotate(0deg) scale(1);
    }

50% {
      -moz-transform: rotate(45deg) scale(1.3);
      -webkit-transform: rotate(45deg) scale(1.3);
      transform: rotate(45deg) scale(1.3);
    }

55% {
      -moz-transform: rotate(90deg) scale(1);
      -webkit-transform: rotate(90deg) scale(1);
      transform: rotate(90deg) scale(1);
    }

100% {
      -moz-transform: rotate(90deg) scale(1);
      -webkit-transform: rotate(90deg) scale(1);
      transform: rotate(90deg) scale(1);
    }
  }
  @-moz-keyframes showHide {
    0% {
      opacity: 0;
    }

45% {
      opacity: 0;
    }

50% {
      opacity: 1;
    }

100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes showHide {
    0% {
      opacity: 0;
    }

45% {
      opacity: 0;
    }

50% {
      opacity: 1;
    }

100% {
      opacity: 1;
    }
  }
  @-o-keyframes showHide {
    0% {
      opacity: 0;
    }

45% {
      opacity: 0;
    }

50% {
      opacity: 1;
    }

100% {
      opacity: 1;
    }
  }
  @-ms-keyframes showHide {
    0% {
      opacity: 0;
    }

45% {
      opacity: 0;
    }

50% {
      opacity: 1;
    }

100% {
      opacity: 1;
    }
  }
  @keyframes showHide {
    0% {
      opacity: 0;
    }

45% {
      opacity: 0;
    }

50% {
      opacity: 1;
    }

100% {
      opacity: 1;
    }
  }
  @-moz-keyframes hideShow {
    0% {
      opacity: 1;
    }

50% {
      opacity: 1;
    }

55% {
      opacity: 0;
    }

100% {
      opacity: 0;
    }
  }
  @-webkit-keyframes hideShow {
    0% {
      opacity: 1;
    }

50% {
      opacity: 1;
    }

55% {
      opacity: 0;
    }

100% {
      opacity: 0;
    }
  }
  @-o-keyframes hideShow {
    0% {
      opacity: 1;
    }

50% {
      opacity: 1;
    }

55% {
      opacity: 0;
    }

100% {
      opacity: 0;
    }
  }
  @-ms-keyframes hideShow {
    0% {
      opacity: 1;
    }

50% {
      opacity: 1;
    }

55% {
      opacity: 0;
    }

100% {
      opacity: 0;
    }
  }
  @keyframes hideShow {
    0% {
      opacity: 1;
    }

50% {
      opacity: 1;
    }

55% {
      opacity: 0;
    }

100% {
      opacity: 0;
    }
  }

</style>

</body>
</html>