CSS3 矩阵 3d 矩形到梯形的转换

发布于 2024-10-16 21:39:40 字数 1895 浏览 3 评论 0原文

我正在尝试使用 webkit 对 CSS3 transform:matrix3d() 的支持来创建“掉落的卡片”效果。（此输出的唯一目标是 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 矩阵只能通过盒子的变换来生成矩形和平行四边形，并且不规则形状需要矩阵3d 变换操作（这有助于刷新我逐渐衰退的线性代数！），但我似乎只能生成矩形和平行四边形。

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

原文

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)

The end effect should transition through the 4 stages below and end up as just a horizontal line:

enter image description here

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

And the HTML is simple for testing:

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

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.

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.

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

别再吹冷风 2024-10-23 21:39:40

-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 透视原点指定“相机”在 3D 空间中相对于任何 3D 变换的位置，如果不小心，很容易得到不直观的结果。

第二次更新：
现在所有边缘浏览器都支持透视（尽管 Firefox 的抗锯齿功能没有什么值得推荐的（并且显然需要 -moz））

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

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

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)

Is exactly what you need.

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.

2nd Update:
Perspective is now supported in all edge browsers (although firefox's anti-aliasing has little to recommend it (and needs -moz obviously))

3rd Update:
Updated the fiddle for cross browser for Firefox, IE and unprefixed.

回复收藏 0 原文

青春如此纠结 2024-10-23 21:39:40

当我注意到 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/

I was reading the CSS transition spec when I noticed border-width is animatable, and you can fake trapezoids using border widths. This means you can fake falling cards in Chrome, Opera and 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;

}

Of course, this has major caveats: in your example the card is falling frontward, I tried but it seems this is not possible with this technique. Any content inside the shape won't be transformed, it's just the card shape. Oh, and the card shape can't have any borders. Major drawbacks that limit it's real-life application.

Still, it's pretty cool! Play with it here: http://jsfiddle.net/mxgAu/

回复收藏 0 原文

白鸥掠海 2024-10-23 21:39:40

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

If you are using IE10, then the solution could be:

.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);
}

回复收藏 0 原文

~没有更多了~