JSFiddle - React, Tailwind, and code Playground

by rodrigonery

HTML

<!DOCTYPE HTML>
<html lang="pt-BR">

  <head>
    <meta charset="UTF-8">
    <meta name="author" content="Ofelquis Gimenes">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title>Wall parallax 3D CSS3 Transforms</title>
    <style type="text/css">
      html,
      body {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: #000
      }

      #wall {
        display: block;
        width: 1000px;
        margin: 100px auto 0;
        position: relative;
      }

      .brick {
        background-color: #fff;
        width: 100px;
        height: 150px;
        float: left;
        margin: 5px;
        background: url(http://dev.codeanywhere.net/107/02f2736173098138e657658095f638f0/loading-img.gif.gif) center no-repeat;
        z-index: 5
      }

      .brick img.lol {
        -moz-transform: translate(-200px, -200px) perspective(600px) rotateY(360deg);
        -webkit-transform: translate(-200px, -200px) perspective(600px) rotateY(360deg);
        width: 400%;
        height: 400%;
        position: absolute;
      }

      .brick img {
        width: 100%;
        opacity: 0;
        -moz-transform: translate(0px, 0px) perspective(600px) rotateY(0deg);
        -webkit-transform: translate(0px, 0px) perspective(600px) rotateY(0deg);
        -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
        -ms-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out
      }

      footer {
        color: white;
        display: block;
        clear: both;
        position: relative;
      }

      footer a {
        color: red;
        text-decoration: none;
      }

      footer a:hover {
        text-decoration: underline;
      }

    </style>
  </head>

  <body>

    <section id="wall">
      <div class="brick"><img...

JavaScript

/*
    By OFelquis
    Twitter: @felquis
    Blog : tutsmais.com.br
*/