CSS3 matrix3d矩形到梯形变换
beg*_*ggs 8 transform matrix css3
我正在尝试使用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是基于读取这个SO问题,但它产生了一个缩小的正方形,它围绕由初始框底部定义的x轴翻转.
据我所知,CSS 2d矩阵只能通过变换一个框来产生矩形和平行四边形,并且不规则形状需要进行matrix3d变换操作(这有助于刷新我的衰落线性代数!),但我似乎只能生成矩形和平行四边形.
我看了一下标有matrix和的一些SO问题transformation.他们中的大多数都不是基于CSS的,我无法得到我想要的转换.
-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空间中的位置,如果您不小心,很容易得到不直观的结果.
第二次更新:现在所有边缘浏览器都支持Perspective(虽然firefox的抗锯齿很少推荐它(并且显然需要-moz))
第三次更新:更新了Firefox,IE和未加固定的跨浏览器的小提琴.