gpt4 book ai didi

CSS 3D 转换独立于元素大小?

转载 作者:太空宇宙 更新时间:2023-11-04 07:30:51 24 4
gpt4 key购买 nike

是否可以定义一个 CSS 3D 变换,使其独立于变换元素的大小进行相同的变形?理想情况下,在元素被任意/流畅地调整大小时会保留一些东西。

我有一个使用perspectivetransform: 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 上,并保持响应)。这可能吗?

最佳答案

您可以获得一致的变换效果,方法是使用缩放变换调整大小,使整个图像变小以适应您想要的输出。

小心:放大可能会引入不需要的像素化。因此,只需在中等大屏幕上通过旋转获得转换后的输出,然后添加媒体查询以将其缩小。

这是你的例子:

.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 转换独立于元素大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49415469/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com