CSS3 matrix3d矩形到梯形变换

时间:2011-02-10 08:19:38

标签: matrix css3 transform

我正在尝试使用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有助于刷新我的衰落线性代数!),但我似乎只能生成矩形和平行四边形。

我查看了一些标有matrixtransformation的SO问题。他们中的大多数都不是基于CSS的,我无法实现我想要的转换。

3 个答案:

答案 0 :(得分:9)

-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))

第3次更新: 更新了Firefox,IE和未加固定的跨浏览器的小提琴。

答案 1 :(得分:3)

当我注意到border-width是动画时,我正在阅读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/

答案 2 :(得分: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);
}