css - 除了反复试验之外，是否有更好的方法来找出 3D 转换的正确 CSS 值？

Question

我有一个 3D iPhone 矢量图，我想在它上面放一个屏幕 Sprite 动画。我正在 iPhone 顶部创建一个 div 作为 mask ，带有 Sprite 背景(通过过渡和背景位置设置动画)。

然而，iPhone 已经处于正确的 3D 位置，但为了能够使用带 mask 的 3D Sprite 图像，div 也应该旋转 3D。太糟糕了，我已经花了一个多小时试图找出正确的值来将 div 正确定位在 iPhone 的顶部。

我目前使用的值是:perspective、skew、rotateX、rotateY & 旋转Z。

可惜 Photoshop (CC) 在执行透视变换时没有给出透视和 XYZ 轴值，否则这将非常简单。

除了反复试验之外，谁知道找出正确值的好方法。

注意:我不能使用普通的 iPhone 图像并在其上应用 3D 值，然后再将相同的值应用到它上面的蒙版，因为这意味着你会有一个平面 3D 对象。

谢谢!

当前状态，perspective(1000px) rotate(-72deg) rotateX(0deg) rotateY(40deg) rotateZ(11deg) skew(0deg, 20deg); coming来自标准的 16:9 人像图像。

Answer 1

看起来你想要一些类似的东西:

-webkit-transform: rotateX(60deg) rotateY(20deg) rotateZ(-60deg);
-moz-transform: rotateX(60deg) rotateY(20deg) rotateZ(-60deg);
-o-transform: rotateX(60deg) rotateY(20deg) rotateZ(-60deg);
-ms-transform: rotateX(60deg) rotateY(20deg) rotateZ(-60deg);
transform: rotateX(60deg) rotateY(20deg) rotateZ(-60deg);

鉴于屏幕 x 轴和 y 轴在所有四个点上都是一致的，您应该能够在不使用倾斜的情况下执行此操作，并且可能使用零视角。

一旦元素在 3d 空间中正确变换，您可以使用变换原点在 x 和 y 轴上移动它，例如:

-webkit-transform-origin: 20px 50%;
-moz-transform-origin: 20px 50%;
-o-transform-origin: 20px 50%;
-ms-transform-origin: 20px 50%;
transform-origin: 20px 50%;