如果我调整浏览器的大小使高度变小，图片会保持完美缩放并位于正确的位置。但是，如果我调整浏览器的大小以减小宽度，图片会移动并且无法正确缩放。
我在将包含图像的第二个容器上使用透视变换:
变换:平移(-50%, -50%) 透视(1000px) rotateY(50deg);
示例:https://jsfiddle.net/a7kw47pg/1/
如果我用该代码创建一个 html 文件并在我的浏览器上运行它，我看不到水印上的第一个“t”。但是，当我调整浏览器的宽度使其变小时，我能够看到“t”。我想要它，这样无论浏览器的大小如何，我都看不到“t”(基本上是旋转的图片，其视角保持锁定在那个确切的位置)。
最佳答案
缩放比例不同的原因是因为所有原始 div 位置都在比例 基础上缩放，而转换视角在绝对 基础上改变。透视值可以被认为是从观看者的眼睛到屏幕的距离的像素数。任何 3D 旋转当然都会使您的图像变小(在这种情况下它只是水平的，因为您只围绕垂直轴旋转)。当你假想的眼睛与屏幕的距离固定时(在本例中为 1000 像素)，那么当图像较小时你会看到较小的相对透视效果，而当图像较大时你会看到较大的相对透视效果。 (想象站在离一座巨大建筑物 1 米远的地方 - 透视效果是疯狂的。但现在想象站在离一个 1 厘米的小立方体 1 米远的地方 - 它看起来和在 1 公里以外的地方看起来基本一样)
为了保持图像的水平尺寸不变，您需要随着窗口尺寸的变化动态修改透视距离，使其与包含的 div 的水平尺寸成比例.
关于javascript - 宽度缩放时透视变换不缩放？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37955064/