Question

我让这段代码从右向左滑动。

#panel {
  position: absolute;
  right: 0;
  width: 180px;
  top: 0;
  bottom: 0;
  box-shadow: 0px 0px 15px black;
  background: white;
  padding: 10px;
  -webkit-transform-origin: 100% 50%;
  -webkit-transform: scaleX(0.00001);
  -webkit-transition: -webkit-transform 0.2s ease-in-out;
  outline: 0;
}

#panel:target {
  -webkit-transform: scaleX(1);
}

<div><a href="#panel">☰</a></div>
<p><a id="panel" href="#">This is the side panel.</a></p>

现在，我喜欢这种从左到右的滑动。我右转：0；向左滑动，然后从中心向左滑动。我确实阅读了几乎所有文章，并尝试了许多不同的方法，但是没有任何效果。有人可以帮我吗？非常感谢。

Answer 1

不确定，您到底在寻找什么。但是也许您应该使用translate属性而不是规模，尽管您也可以使用scale来实现相同的目的。

#panel {
  position: absolute;
  left: 0;
  width: 180px;
  top: 0;
  bottom: 0;
  box-shadow: 0px 0px 15px black;
  background: white;
  padding: 10px;
  -webkit-transform-origin: 100% 50%;
  -webkit-transform: translateX(-100%);
  -webkit-transition: -webkit-transform 0.2s ease-in-out;
  outline: 0;
}
#panel:target {
  -webkit-transform: translateX(0%);
}

<div><a href="#panel">☰</a></div>
 <p><a id="panel" href="#">This is the side panel.</a></p>

Answer 2

您还必须更改-webkit-transform-origin: 100% 50%;并使其-webkit-transform-origin: 0% 100%;才能从左侧打开，并检查代码段：

#panel {
  position: absolute;
  left: 0;
  width: 180px;
  top: 0;
  bottom: 0;
  box-shadow: 0px 0px 15px black;
  background: white;
  padding: 10px;
  -webkit-transform-origin: 0% 100%;
  -webkit-transform: scaleX(0.00001);
  -webkit-transition: -webkit-transform 0.2s ease-in-out;
  outline: 0;
}
#panel:target {
  -webkit-transform: scaleX(1);
}

<div>
 <a href="#panel">☰</a>
</div>
<p>
  <a id="panel" href="#">This is the side panel.</a>
</p>

Answer 3

您将right更改为left是正确的，但还需要将transform-origin的X轴更改为零：

#panel {
  position: absolute;
  left: 0;
  width: 180px;
  top: 0;
  bottom: 0;
  box-shadow: 0px 0px 15px black;
  background: white;
  padding: 10px;
  -webkit-transform-origin: 0 50%;
  -webkit-transform: scaleX(0.00001);
  -webkit-transition: -webkit-transform 0.2s ease-in-out;
  outline: 0;
}

#panel:target {
  -webkit-transform: scaleX(1);
}

<div><a href="#panel">☰</a></div>
<p><a id="panel" href="#">This is the side panel.</a></p>

Answer 4

这是因为

-webkit-transform-origin

这是您要寻找的吗？

#panel {
  position: absolute;
  left: 0;
  width: 180px;
  top: 0;
  bottom: 0;
  box-shadow: 0px 0px 15px black;
  background: white;
  padding: 10px;
  -webkit-transform-origin: 0% 50%;
  -webkit-transform: scaleX(0.00001);
  -webkit-transition: -webkit-transform 0.2s ease-in-out;
  outline: 0;
}

#panel:target {
  -webkit-transform: scaleX(1);
}

<div><a href="#panel">☰</a></div>
<p><a id="panel" href="#">This is the side panel.</a></p>

CSS滑动面板从左到右

4 个答案: