我有这段代码从右向左滑动。
#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;向左,则从中心向左滑动。我确实阅读了几乎所有帖子并尝试了很多不同的方法,但没有任何效果。有人可以帮助我吗?非常感谢。
最佳答案
不确定您到底在寻找什么。但也许您应该使用 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>
关于html - CSS从左到右滑动面板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51838805/