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

Question

注意:此问题要求解释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;
}

<div></div>

问题

这在Firefox v35.0.1和IE v10上运行良好.见下面的输出:

但在Chrome 40.0.2214.115上,输出似乎有所不同.菱形的角度会发生变化,但不均匀.并且在变换属性的转换结束附近,菱形"逐步结束"到期望的输出,而不是过渡变换.
它既不与skewX(Xdeg) skewY(Ydeg)也不是skew(Xdeg, Ydeg):小提琴.

该GC输出低于:

问题: Chrome似乎支持已弃用,skew(Xdeg, Ydeg)但转换输出有问题.*什么导致这个奇怪的输出与铬？**

注意:使用scaleX变换也可以实现这种效果,但这是一个刻意提出的问题.

Answer 1

我现在一直在 chrome 上处理过渡。我发现使用这样的位置标签。

div:hover {
    position:relative; /*Desribes the type of position*/
    left:40; /*X Coordinate*/
    top:25; /*Y Coordinate*/
}
  

使过渡在 Chrome 上有效。

这里有一些资源 - https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions - http://blog.wercker.com/2013/10/02/Chrome-css-animation .html

希望它有帮助:)