CSS转换过渡无法正常工作(Chrome)

注意:此问题要求解释Chrome上的CSS转换输出.

描述

我用css skew和rotate变换做了一个菱形.

我:hover为该元素添加了伪类并改变了它的倾斜角度.

预期的结果是,在悬停菱形时,菱形的角度会发生变化.

这是小提琴和 片段:

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;
}