CSS Transform Transition not working properly (Chrome) - css

Question

Note: This question requests an explanation of CSS transform output on Chrome.
Description
I made a rhombus using css skew and rotate transforms.
I added :hover pseudo-class to that element and changed its skew angle.
The expected result was that on hovering the rhombus, the angle of the rhombus will change.
Here is the fiddle and
snippet :
div {
height: 200px;
width: 200px;
position: relative;
top: 140px;
left: 120px;
-webkit-transform: rotate(-45deg) skew(10deg, 10deg);
-moz-transform: rotate(-45deg) skew(10deg, 10deg);
transform: rotate(-45deg) skew(10deg, 10deg);
background: red;
transition: 0.8s linear all;
}
div:hover {
-webkit-transform: rotate(-45deg) skew(-30deg, -30deg);
-moz-transform: rotate(-45deg) skew(-30deg, -30deg);
transform: rotate(-45deg) skew(-30deg, -30deg);
transition: 0.8s linear all;
}
<div></div>
Problem
This is working fine on Firefox v35.0.1 and IE v10. See the output below :
But on Chrome 40.0.2214.115, the output seems to be different. The angle of the rhombus changes, but not evenly. And near the end of transition of transform property, the rhombus "step-ends" to the desired output, instead of transforming transitionally.
Its neither working with skewX(Xdeg) skewY(Ydeg) nor skew(Xdeg, Ydeg) : fiddle.
The GC output is below :
Question : Chrome seems to support the deprecated skew(Xdeg, Ydeg) but the output with transition is buggy. * What is causing this strange output with chrome?**
Note: This effect is achievable using scaleX transform too, but this is a deliberately made question.

Answer 1

You could try using clip-path: polygon() to achieve the same effect. Not yet supported in all browsers unfortunately.
div {
width: 200px;
height: 280px;
background: red;
-webkit-clip-path: polygon(50% 20%, 100% 50%, 50% 80%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
transition: all 0.5s ease;
}
div:hover {
-webkit-clip-path: polygon(50% 0%, 80% 50%, 50% 100%, 20% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
/* center */
html, body { height: 100%; }
body {
display: flex;
justify-content: center;
align-items: center;
}
<div></div>

Answer 2

I have been working with transitions now on chrome. I find using position tags like this.
div:hover {
position:relative; /*Desribes the type of position*/
left:40; /*X Coordinate*/
top:25; /*Y Coordinate*/
}
Make the transitions work on chrome.
Here are some resources
-https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
-http://blog.wercker.com/2013/10/02/Chrome-css-animation.html
Hope it helped :)