CODEWITHSUNDEEP
csstransform
Jad Joubran
Jad Joubran

Reputation: 2579

CSS3 transform: translateX equivalent for right

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?

Upvotes: 9

Views: 20205

Answers (1)

Patsy Issa
Patsy Issa

Reputation: 11303

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.

Upvotes: 4

Related Questions