JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div id="container">
    <div id="target">
        <p>hello</p>
    </div>
</div>

CSS

#container {
    -webkit-perspective: 800;
    -webkit-transform-origin: 250px 250px;
}
#target {
    top: 50px;
    left: 100px;
    position: relative;
    width: 300px;
    height: 300px;
    padding: 0;
    background-color: #F25022;
    text-align: center;
    /* -webkit-transform-style: preserve-3d; */
    -webkit-transition: all .1s;
    -moz-transition: all .1s;
}
#target p {
    position: relative;
    text-align: center;
    color: white;
    top: 120px;
    font-size: 3em;
    -webkit-user-select: none;
    cursor: default;
}

JavaScript

$("#target").mousedown(function (e) {
    var $this = $(this);
    var left = ((e.pageX - $this.offset().left) / $this.outerWidth() - 0.5) * 2;
    var top = ((e.pageY - $this.offset().top) / $this.outerHeight() - 0.5) * -2;

    var scaleAmount = ((Math.abs(left) + Math.abs(top)) / 10) + .8;

    $this.css({
        transform: "rotateY(" + (30 * left) + "deg) rotateX(" + (30 * top) + "deg) scaleX(" + scaleAmount + ") scaleY(" + scaleAmount + ")",
        transition: "all .1s"
    });

    window.clickStartTime = new Date();
});

$(window).mouseup(function (e) {
    var $target = $("#target");
    var left = ((e.pageX - $target.offset().left) / $target.outerWidth() - 0.5) * 2;
    var top = ((e.pageY - $target.offset().top) / $target.outerHeight() - 0.5) * -2;

    var scaleAmount = ((Math.abs(left) + Math.abs(top)) / 10) + .8;

    var timeElapsedSinceClick = new Date() - window.clickStartTime;

    if (timeElapsedSinceClick < 100) {
        setTimeout(function () {
            $target.css({
                transform: "none",
                transition: "all .3s"
            });
        }, 100 - timeElapsedSinceClick);
    } else {
        $target.css({
            transform: "none",
            transition: "all .3s"
        });
    }


});