CSS3 matrix3d矩形到梯形变换

Question

我正在尝试使用 webkit 对 CSS3 transform: matrix3d(<matrix>) 的支持来创建“掉落卡片”效果。 （此输出的唯一目标是 Chrome）

最终效果应该通过下面的 4 个阶段过渡，最终变成一条水平线：

这是我现在拥有的 CSS：

#test { 
            margin: auto auto;
            height: 200px;
            width: 200px;
            border:1px solid black;
            background-color: lightblue;
            -webkit-perspective: 1000; 
            -webkit-transform-origin: 50% 100%;
            -webkit-transform-style: preserve-3d;
            -webkit-animation-name: flip-card;        
            -webkit-animation-duration: 1s;        
            -webkit-animation-iteration-count: infinite;        
            -webkit-animation-timing-function: linear;
            -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.5);
        }
         @-webkit-keyframes flip-card {
            0%    {-webkit-transform: ;}
            100%    {-webkit-transform:
                        matrix3d(1, 0, 0, 0,
                                 0, 1, 0, 0, 
                                 0, 0, 0, 0, 
                                 0, 0, 0.001, 1);}
        }    

HTML 易于测试：

<body>
   <div id="test">this div should fall forward...</div>
</body>

上面的 matrix3d 是基于读取 this SO question，但它会产生一个缩小的正方形，该正方形围绕由初始框底部定义的 x 轴翻转。

我知道 CSS 2d 矩阵只能通过盒子的变换来生成矩形和平行四边形，不规则的形状需要 matrix3d 变换操作（this 有助于刷新我衰落的线性代数！），但我似乎只是能够产生矩形和平行四边形。

我查看了一些标记为matrix 和transformation 的SO 问题。它们中的大多数都不是基于 CSS 的，我无法获得我想要的转换。

Answer 1

-webkit-perspective 在 Chrome 中还不能工作（只是 Safari），所以这不起作用（在 Safari 中尝试你的代码）。此外，Chrome 中的 3D 变换通常有点不确定，并且不能与渐变很好地结合，例如。

rotate3d(1, 0, 0, 90deg) 和矩阵一样可以完成你正在做的事情。矩阵表示法只是将 3D 旋转、倾斜、移动和原点组合到单个数组中的一种简短方式。由于您只是围绕 x 轴旋转，因此您不需要达到这些长度。

webkit-transform: perspective(800) rotate3d(1, 0, 0, -90deg)

正是你所需要的。

更新： 这是一个link to a jsfiddle，其中包含正是您正在寻找的适用于 chrome 和 safari 的内容。请注意，指定翻转的变换原点与透视的原点相同很重要。 Webkit-perspective origin 指定“相机”在 3D 空间中相对于任何 3d 变换的位置，如果您不小心，很容易得到不直观的结果。

第二次更新： 现在所有边缘浏览器都支持透视（尽管firefox的抗锯齿几乎没有推荐它（显然需要-moz））

第三次更新： 为 Firefox、IE 和无前缀的跨浏览器更新了 fiddle。

Answer 2

我在阅读 CSS 过渡规范时注意到边框宽度是 可动画的，您可以使用边框宽度来伪造梯形。这意味着您可以在 Chrome、Opera 和 FF4 中伪造掉落的卡片！

#stage {
  margin-top: 200px;
  position: relative;
}

#trapezoid {
    position: absolute;
    bottom: 0;
    border: solid 1px #fff;
    border-bottom: solid 200px #c00;
    width: 200px;
    -webkit-transition: all ease 1s;

}

#stage:hover #trapezoid {
  border: solid 50px #fff;  
  border-bottom: solid 20px #f11;
  width: 100px;

}

当然，这有很大的警告：在你的例子中，卡片向前掉了，我试过了，但似乎用这种技术是不可能的。形状内的任何内容都不会被转换，它只是卡片形状。哦，卡片形状不能有任何边框。限制其实际应用的主要缺点。

不过，还是很酷的！在这里玩它：http://jsfiddle.net/mxgAu/

Answer 3

如果您使用的是 IE10，那么解决方案可能是：

.up{
    -ms-transform-origin: 50% 100%;
    -ms-transform: perspective(100px) rotateX(7deg);
}

.down{
    -ms-transform-origin: 50% 0%;
    -ms-transform: perspective(100px) rotateX(-7deg) scale(1);
}