I want to do this: -webkit-transform: translateX(300px)
but from the right instead of having the origin on left.
I tried -webkit-transform-origin: 100% 100%
and even top right
and it didn't affect it.
Is there a way to do it?
The translateX() CSS function repositions an element horizontally on the 2D plane. Its result is a <transform-function> data type.
The translateX() function is a 2D transform function used to translate an element along the x-axis. It takes a translation value tx as an argument. This value specifies the amount by which an element is to be translated. The translation value tx is provided either as a <length> or as a percentage .
translateX(n) Defines a 2D translation, moving the element along the X-axis. translateY(n) Defines a 2D translation, moving the element along the Y-axis. scale(x,y)
The CSS translate() function is used to move elements in a two-dimensional space. It moves the position of the element on the plane by the amount provided by tx and ty . The translate() function accepts two arguments, indicating how much to move the element along the x and y axes respectively.
By the power of CSS:
body {
padding: 0;
margin: 0;
}
#page {
position: absolute;
width: 100%;
height: 100%;
background-color: black;
z-index:2;
right:0;
}
#left_drawer {
background-color: #222222;
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 100%;
z-index: 1;
}
#toggle {
width: 50px;
height: 50px;
background-color: red;
float: right;
}
.open_drawer {
-webkit-animation: open_drawer 300ms ease-in-out;
-webkit-animation-fill-mode: forwards;
-webkit-transform: translateX(0);
}
@-webkit-keyframes open_drawer {
to {
-webkit-transform: translateX(-300px);
}
}
This will make it slide in from the right. Fiddle.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With