CSS Transform Transition not working properly (Chrome)

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>