我有一个容器,其中包含与以下内容类似的子项....
<div id="content">
<section id="svg-city">
<svg ...>
</section>
<section id="svg-water">
<svg ...>
</section>
</div>
使用以下SCSS
#content {
height: 100%;
width: 100%;
transform-style: preserve-3d;
transition:5s transform linear;
transform:translate3d(0px, 0px, 0px);
will-change: transform;
&.phase-1 {
transform:translate3d(0px, 0px, -1500px);
}
}
#svg-city {
svg {
width: 2000px;
transform:translate3d(0%, -165px, -800px);
}
}
#svg-water {
svg {
width:8000px;
left:50%;
transform:translate3d(-50%, 350px, -800px);
}
}
我的想法是,当我将类.phase-1添加到内容容器时,整个屏幕会缩小,显示3d景观。这可以在我桌面屏幕上的Chrome中顺利运行,但是如果我将它拉到我的笔记本电脑上,那么场景会开始变得生涩和跳跃。此外,当我添加更多.svg元素时,场景会在所有浏览器中展示此行为。
有没有办法更好地处理过渡/翻译以显示类似于(https://codepen.io/nickpettit/full/eBCrK)的场景