JSFiddle - React, Tailwind, and code Playground

TileJS Windows metro tiles and interactions built with js and css3

by Jennifer Perrin

HTML

<div id="metro-array" style="display: inline-block;">


                        <!-- Simple grid for the demo! None of these styles are required, thats just how I've styled my tiles -->
                        <!-- The only important thing is class="metro-tile" -->
                        <div style="width: 230px; height: 230px; float: left; ">

                            <a class="metro-tile" style="cursor: pointer; width: 230px; height: 110px; display: block; background-color: deepSkyBlue; color: #fff; margin-bottom: 10px;">
                                You can
                            </a>

                            <a class="metro-tile" style="cursor: pointer; width: 230px; height: 110px; display: block; background-color: deepSkyBlue; color: #fff;">
                                put
                            </a>
                        </div>

                        <div style="width: 230px; height: 230px; float: left; margin-left: 10px">

                            <a class="metro-tile" style="cursor: pointer; width: 230px; height: 230px; display: block; background-color: deepSkyBlue; color: #fff">
                                anything you want
                            </a>

                        </div>

                        <div style="width: 230px; height: 230px; float: left; margin-left: 10px">

                            <a class="metro-tile" style="cursor: pointer; width: 230px; height: 110px; display: block; background-color: deepSkyBlue; color: #fff; margin-bottom: 10px;">
                                in
                            </a>

                            <a class="metro-tile" style="cursor: pointer; width: 110px; height: 110px; margin-right: 10px; display: block; float: left; background-color: deepSkyBlue; color: #fff;">
                                these
                            </a>

                            <a class="metro-tile" style="cursor: pointer; width: 110px; height: 110px; display: block;...

CSS

#metro-array a {
     text-indent: 5px;
     font-weight: normal;
     text-transform: uppercase;
 }

JavaScript

/*
 * Metro-tiles:  Css3 windows metro tiles
 * Author     :  Tim Holman http://tholman.com/
 * @Author    :  @twholman
 */

function Tile( element ){
    
    // Tile element    
    var tile = element;

    // Global settings

    // Declare css for when the tile is in its idle state.
    var idleCss = "rotateX( 0deg ) rotateY( 0deg ) translateZ( 0px )";


    var initialize = function() {

        // Set transform origin to the center of the element.
        tile.style.webkitTransformOrigin = "50% 50%";
        tile.style.MozTransformOrigin = "50% 50%";
        tile.style.msTransformOrigin = "50% 50%";
        tile.style.oTransformOrigin = "50% 50%";
        tile.style.transformOrigin = "50% 50%";

        // Make sure the parent preserves the 3d perspective
        tile.parentElement.style.webkitTransformStyle = "preserve-3d";
        tile.parentElement.style.MozTransformStyle = "preserve-3d";
        tile.parentElement.style.msTransformStyle = "preserve-3d";
        tile.parentElement.style.oTransformStyle = "preserve-3d";
        tile.parentElement.style.transformStyle = "preserve-3d";

        // Set element transform times
        tile.style.webkitTransition = "-webkit-transform 0.08s";
        tile.style.MozTransition = "-moz-transform 0.08s";
        tile.style.msTransition = "-ms-transform 0.08s";
        tile.style.oTransition = "-o-transform 0.08s";
        tile.style.transition = "transform 0.08s";

        // This gives an antialiased effect for transforms in firefox.
        tile.style.outline = "1px solid transparent";

        // Font smoothing for webkit.
        tile.style.webkitFontSmoothing = "antialiased";

        // Listen to mouse events for the tile.
        tile.addEventListener('mousedown', MouseDown, false);
        
    }


    var pushTile = function( x, y ){

        // Get the elements width and height.
        var width = tile.offsetWidth;
        var height = tile.offsetHeight;

        var translateString = "perspective( 800px...