JSFiddle - React, Tailwind, and code Playground

by geekambassador

HTML

<script src="http://www.ninjabonsai.net/cdn/TweenMax.min.js"></script>

CSS

.box
        {
            position: absolute;
            width: 300px;
            height: 300px;
            left: 100px;
            top: 10px;
            background-color: #66ff55;
            border-radius: 5% 5%;
        }

JavaScript

$(document).ready(init);

function init() {
    console.log("init");

    for (var i = 0; i < 4; i++) {
        var box = document.createElement("div");
        box.setAttribute("class", "box");
        box.style.left = 10 + i % 2 * 310 + "px";
        box.style.top = 10 + (i / 2 | 0) * 310 + "px";
        box.addEventListener("mousedown", boxTap);
        box.addEventListener("touchstart", boxTap);
        document.body.appendChild(box);
    }

    CSSPlugin.defaultTransformPerspective = 500;
}

function boxTap(e) {
    console.log("boxTap " + e.type);

    e.preventDefault();

    var box = e.target;

    if (!TweenMax.isTweening(box)) {
        TweenMax.to(box, 3, {
            css: {
                rotationY: "+=180"
            }
        });
    }
    }