是否可以对一个 div 应用两种不同来源的转换？

发布于 2024-12-08 06:50:08 字数 548 浏览 0 评论 0原文

我有一个 div，我想围绕它的 y 轴（带有透视）旋转，然后围绕不同的原点对其进行另一个 3d 旋转并显示结果。这可能吗？我只能在 -transformation 语句之外获得转换原点，因此定义新的转换只会覆盖第一个转换。

我还尝试过嵌套 div 并在内部 div 上执行一个转换，并在外部 div 上执行另一个转换，但结果只是第一个转换到第二个转换平面上的投影，它不存在于其自己的平面上，所以在屏幕上看起来完全错误。

据我所知，我不能将画布与 JavaScript 一起使用，因为这些转换没有视角。

这就是我想做的事情：

-webkit-transform-origin: 0px 0px;
-webkit-transform: perspective(1000px) rotateY(-90deg);
-webkit-transform-origin: 200px 200px;
-webkit-transform: perspective(1000px) rotateX(x deg) rotateZ(z deg);

关于如何看到这两种转换的结果有什么想法吗？

原文

I've got a div that I would like to rotate about its y-axis (with perspective) then do another 3d rotation on it around a different origin and display the result. Is this possible? I've only been able to get transformation-origin working outside of a -transformation statement, so defining a new transformation just overrides the first one.

I've also tried nesting divs and doing one transformation on an inner div and doing another on an outer div, but the result is just the projection of the first transformation on to the plane of the second, it does not exists on its own plane, so looks completely wrong on the screen.

As far as I'm aware I can't use canvas with javascript, because those transformations don't have perspective.

This is sort of what I am trying to do:

-webkit-transform-origin: 0px 0px;
-webkit-transform: perspective(1000px) rotateY(-90deg);
-webkit-transform-origin: 200px 200px;
-webkit-transform: perspective(1000px) rotateX(x deg) rotateZ(z deg);

Any ideas on how I can see the result of both of these transformations?

分享到QQ

分享到微博

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

发布评论

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

还在原地等你 2024-12-15 06:50:08

不涉及包装器的解决方案是将两个转换用 translate3d 链接起来。任何平移变换都会为所有后续变换移动 transform-origin - translateX(tx) 将其沿 x 轴移动 tx，translateY(ty) 沿 y 轴移动 ty，translateZ(tz) 沿 z 轴移动 tz和translate3d(tx, ty, tz) 沿 x 轴移动 tx，沿 y 轴移动 ty，沿 z 移动 tz轴。

所以你的 transform 将变成：

transform: perspective(1000px) rotateY(-90deg) 
           translate3d(200px, 200px, 0) 
           perspective(1000px) rotateX(x deg) rotateZ(z deg);

A solution that does not involve having a wrapper is to chain the two transforms with a translate3d between them. Any translate transform moves the transform-origin for all subsequent transforms - translateX(tx) moves it by tx along the x axis, translateY(ty) moves it by ty along the y axis, translateZ(tz) moves it by tz along the z axis and translate3d(tx, ty, tz) moves it by tx along the x axis, by ty along the y axis and by tz along the z axis.

So your transform would become:

transform: perspective(1000px) rotateY(-90deg) 
           translate3d(200px, 200px, 0) 
           perspective(1000px) rotateX(x deg) rotateZ(z deg);

回复收藏 0 原文