CSS3 matrix3d矩形到梯形变换 [英] CSS3 matrix3d rectangle to trapezoid transformation
问题描述
我试图使用webkit的支持CSS3 transform：matrix3d（< matrix>）创建一个落卡效果。 （输出的唯一目标是Chrome）
I am trying to use webkit's support for CSS3 transform: matrix3d(<matrix>) to create a 'falling card' effect. (The only target for the output of this is Chrome)
结束效果应该转换到下面的4个阶段，并以水平线结束：
The end effect should transition through the 4 stages below and end up as just a horizontal line:
>
这里是我现在的CSS：
Here is the CSS I have now:
#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很容易测试：
And the HTML is simple for testing:
<body>
<div id="test">this div should fall forward...</div>
</body>
上面的matrix3d是基于阅读这个问题，但是它产生一个缩小的正方形
The matrix3d in the above was based on reading this SO question, but it produces a shrinking square that flips around the x-axis defined by the bottom of the initial box.
我理解CSS 2d矩阵只能通过盒子的变换产生矩形和平行四边形，而不规则形状需要使用matrix3d变换操作（这有助于刷新我渐渐消失的线性代数！），但我似乎只能产生矩形和平行四边形。
I understand that CSS 2d matrix can only produce rectangles and parallelograms by transformation of a box and that irregular shapes need the matrix3d transform operation (this was helpful in refreshing my fading linear algebra!), but I seem to only be able to produce rectangles and parallelograms.
一些标有 matrix 和转换的SO问题。大多数都不是基于CSS的，我还没有能够得到我想要的转换。
I've looked around at some of the SO questions tagged with matrix and transformation. Most of them are not CSS based and I have not been able to get the transformation I want.
推荐答案
-webkit-perspective在Chrome中工作（只是Safari），所以这将不工作（尝试在Safari中的代码）。另外3D中的3D变换，一般来说，有点iffy，不能很好地与渐变，一个组合。
-webkit-perspective doesn't work in Chrome yet (just Safari), so this won't work (try your code in Safari). Also 3D transforms in Chrome, in general, are a bit iffy, and don't combine well with gradients, for one.
此外，rotate3d（1，0，0，90deg）的工作方式和矩阵一样，可以完成你正在做的事情。矩阵符号只是将3D旋转，倾斜，移动和原点组合成单个数组的一种简短方式。由于你只是绕x轴旋转，你不需要去这些长度。
Also rotate3d(1, 0, 0, 90deg) works just as well as a matrix to accomplish what you're doing. The matrix notation is just a short way of combining 3D rotate, skew, move and origin into a single array. Since you're only rotating around the x-axis, you don't need to go to these lengths.
webkit-transform: perspective(800) rotate3d(1, 0, 0, -90deg)
。
更新：
以下是链接到一个jsfiddle 与完全您正在寻找在chrome和safari工作。请注意，重要的是指定翻转的转换原点与透视的原点相同。 Webkit透视原点指定3D相对于任何3D变换的相机在哪里，如果你不小心，很容易得到不直观的结果。
Update: Here is a link to a jsfiddle with exactly what you are looking for that works in both chrome and safari. Please note that its important to specify that the transform origin for the flip is the same as the origin for the perspective. Webkit-perspective origin specifies where the "camera" is in 3D space relative to any 3d transforms and it's easy to get unintuitive results if you're not careful.
第二次更新：
现在所有边缘浏览器都支持透视（虽然firefox的反锯齿没有多少推荐它（显然需要-moz））
2nd Update: Perspective is now supported in all edge browsers (although firefox's anti-aliasing has little to recommend it (and needs -moz obviously))
第三更新：
更新了Firefox，IE和非前缀的跨浏览器的小提琴。
3rd Update: Updated the fiddle for cross browser for Firefox, IE and unprefixed.
这篇关于CSS3 matrix3d矩形到梯形变换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
