Chuyển đổi CSS3: dịchX tương đương cho đúng

Question

Tôi muốn thực hiện điều này: -webkit-transform: translateX(300px) nhưng từ bên phải thay vì có nguồn gốc ở bên trái.
Tôi đã thử -webkit-transform-origin: 100% 100% và thậm chí top right và nó không ảnh hưởng đến nó.

Có cách nào để làm điều đó không?

Answer 1

Bằng sức mạnh của 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); 
    } 
} 

Điều này sẽ làm cho nó trượt từ cánh phải. Fiddle.