CSS3矩阵变形：从矩形到梯形的转换

Question

CSS3矩阵变形：从矩形到梯形的转换

matrixcsstransform

8

我正在尝试使用 Webkit 对 CSS3 的支持，使用transform: matrix3d(<matrix>)创建“掉落卡片”效果。(这只针对 Chrome)

最终效果应该经历以下 4 个阶段的过渡，并最终变成一条水平线:

enter image description here

这是我现在拥有的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的，我无法获得所需的变换。

- beggs

2

我创建了一个工具来调整CSS变换值，网址是http://www.duopixel.com/stack/webkitmatrix/，但是我担心在Chrome中无法制作梯形。你可以试试看。 - methodofaction

@Duopixel：这是一个很棒的工具。我可以在Safari中创建一个梯形...但是通过移动Row-1，Column4滑块（右上角的滑块）来使其在Y轴上倾斜，而不是在X轴上。在Chrome中，同样的滑块会创建一个平行四边形。我的理解是，我应该通过移动Row-4，Column-3滑块来创建X轴上的平行四边形，但在Safari和Chrome中都没有效果。 - beggs

这个CoffeeScript fiddle可能会有用。它嵌入的博客页面也有一些有用的解释。 - mbomb007

3个回答

3

我在阅读CSS过渡规范时注意到border-width是可以进行动画处理的，并且你可以使用边框宽度来伪造梯形。这意味着你可以在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/

- methodofaction

但是您将无法在其中放置任何内容。 - Derek 朕會功夫

是的，但需要一些技巧。在回答完这个问题后，我发现已经有一个jQuery插件可以实现这个功能：http://lab.smashup.it/flip/. - methodofaction

糟糕！没有CSS3 3D，无法进行3D翻转！http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/fx/tests/test_flip.html - Derek 朕會功夫

0

如果您正在使用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);
}

- frantisek

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Mullany · Accepted Answer

-webkit-perspective在Chrome浏览器中还不能使用（只有Safari支持），因此这段代码无法工作（请在Safari浏览器中尝试你的代码）。此外，总体来说，在Chrome中进行3D变换有些棘手，并且与渐变效果结合得不好。

另外，rotate3d（1,0,0,90deg）同样适用于矩阵，可以实现你想要的效果。矩阵标记只是将3D旋转、倾斜、移动和原点组合成一个数组的简便方法。由于你只需要围绕x轴旋转，因此不需要这么麻烦。

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

这正是你所需要的。

更新：这里有一个jsfiddle链接，里面有你要找的东西，可以在chrome和safari中使用。请注意，在进行翻转时，将翻转原点指定为透视原点非常重要。Webkit-perspective origin指定了相机在3D空间中相对于任何3D变换的位置，如果不小心处理，很容易得到令人费解的结果。

第二次更新：现在所有的edge浏览器都支持Perspective（虽然Firefox的反锯齿效果没有多少推荐价值（需要-moz））

第三次更新：更新了fiddle，使其在Firefox，IE和未加前缀的浏览器中实现跨浏览器。