CSS3 transform: translateX equivalent for right
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.
Jad Joubran
Jad is a Google Developer Expert, Microsoft Most Valuable Professional and Freelance Web Consultant based in Amsterdam. He's on a mission to inspire developers around the world by coaching at Le Wagon coding bootcamp and regularly speaking at international conferences. Lately, Jad's focus lies on spreading knowledge about Progressive Web Apps and mentoring developers through online courses, blog articles and workshops for startups & enterprises.
Updated on June 09, 2022Comments
-
Jad Joubran almost 2 years
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 eventop right
and it didn't affect it.Is there a way to do it?