CSS 3D 变换与元素大小无关？

Question

是否可以定义一个 CSS 3D 变换，使其独立于变换元素的大小进行相同的变形？理想情况下，当元素 arbitrarily/fluidly 调整大小时会保留的内容。

我用 perspective 和 transform: rotateY 进行了简单的转换。我看到随着变换后的元素改变大小，倾斜量也会改变（它似乎绕 Y 轴旋转得更多）：

.perspective {
  perspective: 2000px;
}

.xform {
  transform: rotateY(45deg);
}

.xsmall {
  width: 100px;
}

.small {
  width: 200px;
}

.medium {
  width: 400px;
}

.large {
  width: 800px;
}

<div class="perspective">
  <img src="https://loremflickr.com/50/50" class="xsmall xform" />
</div>
<div class="perspective">
  <img src="https://loremflickr.com/50/50" class="small xform" />
</div>
<div class="perspective">
  <img src="https://loremflickr.com/50/50" class="medium xform" />
</div>
<div class="perspective">
  <img src="https://loremflickr.com/50/50" class="large xform" />
</div>

考虑到 perspective 的含义，这在物理上是有意义的，但我想要的是对任何大小的对象进行相同的转换。（我的用例是将屏幕截图叠加在旋转设备框架的 PNG 上，并保持响应）。这可能吗？

Answer 1

您可以通过使用缩放变换调整大小来获得一致的变换效果，从而使整个图像变小以适合您想要的输出。

注意：放大可能会引入不必要的像素化。因此，只需在 medium-large 屏幕上通过旋转获得转换后的输出，然后添加媒体查询以缩小它。

这是你的例子：

.perspective {
  perspective: 2000px;
}

.xform {
  width: 100px;
  transform: rotateY(45deg);
}

.xsmall {
  transform: rotateY(45deg);
}

.small {
  margin-top: 150px;
  transform: rotateY(45deg) scale(2);
}

.medium {
  margin-top: 300px;
  transform: rotateY(45deg) scale(4);
}

.large {
  margin-top: 650px;
  transform: rotateY(45deg) scale(8);
}

<div class="perspective">
  <img src="https://loremflickr.com/50/50" class="xsmall xform" />
</div>
<div class="perspective">
  <img src="https://loremflickr.com/50/50" class="small xform" />
</div>
<div class="perspective">
  <img src="https://loremflickr.com/50/50" class="medium xform" />
</div>
<div class="perspective">
  <img src="https://loremflickr.com/50/50" class="large xform" />
</div>

CSS 3D 变换与元素大小无关？

CSS 3D transform independent of element size?

css

css-transforms