JSFiddle - React, Tailwind, and code Playground

by jonahe

HTML

<section>
    <div id="div1">
        <p>
            Mouse over me
            <small>I'm 200x200px</small>
        </p>
    </div>
</section>

<dl id="readout">
    <dt>WebKit's <code>webkitConvertPointFromPageToNode()</code></dt>
    <dd>
        <dl>
            <dt>x</dt>
            <dd class="webkit x"></dd>

            <dt>y</dt>
            <dd class="webkit y"></dd>
        </dl>
    </dd>
    
    <dt>Polyfill'd <code>convertPointFromPageToNode()</code></dt>
    <dd>
        <dl>
            <dt>x</dt>
            <dd class="polyfill x"></dd>

            <dt>y</dt>
            <dd class="polyfill y"></dd>
        </dl>
    </dd>
</dl>

CSS

/* Apply perspective to the body */
body {
    -webkit-perspective: 1000px;
    -webkit-perspective-origin: 20% 20%;
}

/* Apply a 3D transform to the grandparent element (blue border) */
section {
    -webkit-transform:
        scale3d(0.5, 0.25, 0.75)
        rotate3d(1,1,1.41421356237, 30deg)
        translate3d(-200px, 300px, 500px);
    
    
    border: 1px solid rgba(0, 0, 255, 0.25);
}

/* Apply a 2D transform to the parent element (green border) */
#div1 {
    position: relative;
    top: 100px;
    left: 25%; 
    
    -webkit-transform-origin: 100% 0;
    -webkit-transform:
        skew(-30deg)
        rotate(-45deg)
        translate(100px, 100px);
    
    border: 1px solid rgba(0, 255, 0, 0.45);
}

/* Apply a 3D transform with perspective to the child element (red box) */
p {
    background: red;
    height: 200px;
    width: 200px;
    
    font-size: 48px;
    text-align: center;
    padding: 15px;
    
    box-sizing: border-box;
    
    -webkit-transform:
        perspective(100px)
        scale3d(5, 5, 0.75)
        rotate3d(1.41421356237,1,1, -50deg)
        translate3d(-100px, -100px, -500px);
}

small { font-size: 0.5em; }

#readout {
    position: fixed;
    top: -5px;
    right: 5px;
}
dt, dd dd { float: left; }
dt { clear: left; }
dd dd { margin-left: 0.5em; }
body > dl > dt { margin-top: 10px; }
.offsetrect{
        position: absolute;
        opacity: 0;
        height: 33.333%;
        width: 33.333%;
    }
    #topleftoffset{
        top: 0;
        left: 0;
    }
    #topcenteroffset{
        top: 0;
        left: 33.333%;
    }
    #toprightoffset{
        top: 0;
        left: 66.666%;
    }
    #centerleftoffset{
        top: 33.333%;
        left: 0;
    }
    #centercenteroffset{
        top: 33.333%;
        left: 33.333%;
    }
    #centerrightoffset{
        top: 33.333%;
        left: 66.666%;
    }
    #bottomleftoffset{
        top: 66.666%;
        left: 0;
    }
    #bottomcenteroffset{
        top: 66.666%;
       ...

JavaScript

// Find the red <p>
p = $('p').get(0)

// TODO: Write a pure Javascript implementation of convertPointFromPageToNode
function convertPointFromPageToNode(elt,coords){
        ///the original innerHTML of the element
        var origHTML=elt.innerHTML;
        //now clear it
        elt.innerHTML='';
    //now save and clear bad styles
    var origPadding=elt.style.padding=='0px'?'':elt.style.padding;
    var origMargin=elt.style.margin=='0px'?'':elt.style.margin;
    elt.style.padding=0;
    elt.style.margin=0;
        //make sure the event is in the element given
        if(document.elementFromPoint(coords.x,coords.y)!==elt){
            //reset the element
            elt.innerHTML=origHTML;
            //and styles
            elt.style.padding=origPadding;
            elt.style.margin=origMargin;
            //we've got nothing to show, so return null
            return null;
        }
        //array of all places for rects
        var rectPlaces=['topleft','topcenter','topright','centerleft','centercenter','centerright','bottomleft','bottomcenter','bottomright'];
        //function that adds 9 rects to element
        function addChildren(elt){
            //loop through all places for rects
            rectPlaces.forEach(function(curRect){
                //create the element for this rect
                var curElt=document.createElement('div');
                //add class and id
                curElt.setAttribute('class','offsetrect');
                curElt.setAttribute('id',curRect+'offset');
                //add it to element
                elt.appendChild(curElt);
            });
            //get the element form point and its styling
            var eltFromPoint=document.elementFromPoint(coords.x,coords.y);
            var eltFromPointStyle=getComputedStyle(eltFromPoint);
            //Either return the element smaller than 1 pixel that the event was in, or recurse until we do find it, and return the result of the recursement
            return...