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>

​

问题

这在Firefoxv35.0.1和IE v10上运行得很好。见以下产出：

​

​

但在Chrome 40.0.2214.115上，其输出似乎是不同的。菱形的角度变化很大，但不均匀。在转换属性的转换接近结束时，菱形“步结束”到期望的输出，而不是过渡转换。

它既不使用skewX(Xdeg) skewY(Ydeg)，也不使用skew(Xdeg, Ydeg)：小提琴。

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

我一直在用铬做过渡。我发现使用这样的位置标签。

​

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

​

使转换在铬上工作。

以下是一些资源-跃迁 -http://blog.wercker.com/2013/10/02/Chrome-css-animation.html

希望它有所帮助:)