CSS Sliding panel from left to right - html

Question

I have this code working from right to left sliding.
#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>☰</div>
<p><a id="panel" href="#">This is the side panel.</a></p>
Now I like to have this sliding from left to right. I changed right:0; to left, then it is sliding from the center to the left. I did read almost all posts and tried a lot of different things but nothing worked. Can somebody help me? Thanks a lot.

Answer 1

Not sure, what exactly you are looking for. But perhaps you should be using translate property instead of scale, though you can achieve the same using scale as well.
#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>☰</div>
<p><a id="panel" href="#">This is the side panel.</a></p>

Answer 2

This is because of
-webkit-transform-origin
Is this what you're looking for ?
#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>☰</div>
<p><a id="panel" href="#">This is the side panel.</a></p>

Answer 3

You have also to change -webkit-transform-origin: 100% 50%; and make it -webkit-transform-origin: 0% 100%; to open it from left, check the snippet:
#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>
☰
</div>
<p>
<a id="panel" href="#">This is the side panel.</a>
</p>

Answer 4

You were correct to change right to left, but you also need to change the X axis of the transform-origin to zero:
#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>☰</div>
<p><a id="panel" href="#">This is the side panel.</a></p>