Question

是否可以定义一个独立于变换元素大小的相同变形的CSS 3D变换？理想情况下，作为元素保留的内容可以任意/流畅地调整大小。

我使用perspective和transform: rotateY进行了简单的转换。我看到，当变换后的元素改变大小时，歪斜量会发生变化（它似乎围绕Y轴旋转更多）：

＆＃13;

.perspective {
  perspective: 2000px;
}

.xform {
  transform: rotateY(45deg);
}

.xsmall {
  width: 100px;
}

.small {
  width: 200px;
}

.medium {
  width: 400px;
}

.large {
  width: 800px;
}

＆＃13;

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

＆＃13;

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

Answer 1

通过使用缩放变换调整大小以使整个图像更小以适合所需的输出，可以获得一致的变换效果。

小心：按比例放大会引入不需要的像素化。因此，只需在中大屏幕上旋转即可获得转换后的输出，然后添加媒体查询以缩小它。

以下是您的示例：

.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变换独立于元素大小？

1 个答案: