css - 负边距在电话 View 中不起作用

我试图通过将对象移出屏幕来实现部分隐藏的对象。

我尝试过使用负边距，相对位置并使用top和right属性，以及转换功能。

问题是它在浏览器上运行得很好，但是当我在电话模拟中查看它时，x轴的移动消失了，而是缩小了对象的大小。我想要隐藏的部分（不在屏幕视图中）进入视图，但这仅在x轴上发生。





可以看出，该对象仍从上方部分隐藏，但从右侧出来。

这是我的代码：

html,
body {
  margin: 0;
  padding: 0;
  font-size: 10px;
}

.circles {
  float: right;
}

.circle {
  background-image: linear-gradient(30deg, rgb(0, 0, 0), rgb(30, 30, 30), rgb(60, 60, 60));
  position: relative;
}

#big-circle {
  height: 40vw;
  width: 40vw;
  border-radius: 20vw;
  transform: translate(4vw, -8vw);
}

#small-circle-1 {
  width: 3vw;
  height: 3vw;
  border-radius: 1.5vw;
  bottom: 30vw;
}

#small-circle-2 {
  width: 2vw;
  height: 2vw;
  border-radius: 1vw;
  bottom: 9vw;
  left: 30vw;
}

<div class="circles">
  <div class="circle" id="big-circle"></div>
  <div class="circle" id="small-circle-1"></div>
  <div class="circle" id="small-circle-2"></div>
  <div class=""></div>
</div>

最佳答案

问题是，您的圈子可以滚动。

您可以像在下面那样在oveflow: hidden;类中使用.circle解决您的问题：

html,
body {
  margin: 0;
  padding: 0;
  font-size: 10px;
}

.circles {
  float: right;
  overflow: hidden;    //    <- this will fix it. :)
}

.circle {
  background-image: linear-gradient(30deg, rgb(0, 0, 0), rgb(30, 30, 30), rgb(60, 60, 60));
  position: relative;
}

#big-circle {
  height: 40vw;
  width: 40vw;
  border-radius: 20vw;
  transform: translate(4vw, -8vw);
}

#small-circle-1 {
  width: 3vw;
  height: 3vw;
  border-radius: 1.5vw;
  bottom: 30vw;
}

#small-circle-2 {
  width: 2vw;
  height: 2vw;
  border-radius: 1vw;
  bottom: 9vw;
  left: 30vw;
}

<div class="circles">
  <div class="circle" id="big-circle"></div>
  <div class="circle" id="small-circle-1"></div>
  <div class="circle" id="small-circle-2"></div>
  <div class=""></div>
</div>