JSFiddle - React, Tailwind, and code Playground

by UserNaN

HTML

<div class='hexagon'></div>
<div class='button'>Button</div>

CSS

.hexagon {
    background: url(http://wossart.com/image/1.png) no-repeat;
    width: 200px;
    height: 230px;
}
.button {
    padding: 10px 20px;
    display: inline-block;
    color: #fff;
    text-shadow: 1px 1px #000;
    letter-spacing: 1px;
    background: #999;
    border: 1px solid #666;
}

JavaScript

$('.button').click(function(){
    $('.hexagon').animate({
        borderSpacing: 150
    },{
        step:function(now,fx){
            var costheta = Math.cos(now*Math.PI*2/360),
                sintheta = Math.sin(Math.PI*2/360),
                m11 = costheta,
                m12 = -sintheta,
                m21 = sintheta,
                m22 = costheta,
                matrix = 'M11='+m11+',M12='+m12+',M21='+m21+',M22='+m22;
            $(this)
            .css('transform','rotateY('+now+'deg)')
            .css('transform-origin','100% 50%')
            .css('filter','progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\','+matrix+')')
            .css('-ms-filter','progid:DXImageTransform.Microsoft.Matrix(SizingMethod=\'auto expand\','+matrix+')');
        }
    },'linear');
});