在转换

Question

所以我试图创建一个纯css视差效果。它工作得很好，除了有一个视差元素我需要可靠的石膏对着视图空间的右边缘。在翻译和扩展之后，这证明......有问题。你可以看到我的低版本here，其中蓝色元素应该在屏幕的右边缘。

我尝试过几种变化的定位和保证金，没有运气。还尝试了一些translateX，但这也不是一个防弹解决方案，因为它似乎是基于元素大小。

这里最重要的细节是Blue block和Teal块都具有可交互的内容。蓝色块位于顶部（z-index），因此具有整页大小容器的蓝绿色块不是问题，但我不能对蓝色块执行相同操作，否则不幸会解决问题like I have here。

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

.box{
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.main{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}
.content{
  width:200px;
  background:cyan;
  margin:0 auto;
  height:1200px;
}
.stuck{
  height:100px;
  width:100px;
  background:blue;
  position:absolute;
  right:0;
  top:20%;
  transform: translateZ(-4px) scale(5);
}

<div class="box">
  <div class="main"><div class="content">Test<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Test</div></div>
  <div class="stuck"></div>
</div>

如何使用CSS将蓝色块保持在最右边？

Answer 1

您需要解决两个不同的问题。

第一个，纠正转换，在此片段中解决（在整页查看）：

＆＃13;

＆＃13;

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

.box{
  perspective: 1px;
  height: 95vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.main{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}
.content{
  width:200px;
  background:cyan;
  margin:0 auto;
  height:95%;
}
.stuck{
  height:100px;
  width:100px;
  background:lightblue;
  border: solid 1px blue;
  position:absolute;
  right:0;
  top:20%;
  transform: translateX(200vw) translateX(-200%) translateZ(-4px)  scale(5);
}

＆＃13;

<div class="box">
  <div class="main"><div class="content">Test<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Test</div></div>
  <div class="stuck"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

应用了2次更正

• translateX（-200％）更正缩放。由于变焦为5，因此盒子的宽度将增加400％，我们需要更正右侧的一半。
• translateX（200vw）更正了透视翻译。由于透视值为1px，z移动为4px，因此+ 50vw的右边界已移至4 * 50vw = 200vw。

另一个问题与内容高于正文时出现的滚动条有关。不幸的是，我不知道这个问题的一个很好的解决方案，因为浏览器的滚动条宽度不一样