block by aubergene 501976afc5defa989df75892b258fb90

Rotating squares

Full Screen

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.

index.html

<!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>