CSS转换过渡无法正常工作（Chrome）

Question

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

---

描述

• 我使用css skew和rotate变换制作了一个菱形。

• 我在该元素中添加了:hover伪类并更改了它的倾斜角度。

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

这是fiddle和 摘录：

＆＃13;

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

问题

这适用于 Firefox v35.0.1 和 IE v10 。请参阅以下输出：

但在 Chrome 40.0.2214.115 上，输出似乎有所不同。菱形的角度会发生变化，但不均匀。并且接近转换属性的转换结束时，菱形＆＃34;步骤结束＆＃34;到期望的输出，而不是过渡转换 它既不适用于skewX(Xdeg) skewY(Ydeg)也不适用skew(Xdeg, Ydeg)： fiddle 。

GC 输出如下：

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

注意：使用scaleX转换也可以实现此效果，但这是一个故意提出的问题。

Answer 1

您可以尝试使用clip-path: polygon()来达到同样的效果。不幸的是，所有浏览器都不支持。

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

我一直在使用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

希望它有所帮助：）