css - CSS3 变换：translateX 等价于右

Question

我想这样做：-webkit-transform: translateX(300px)但从右边而不是左边有原点。
我试过了-webkit-transform-origin: 100% 100%，甚至top right，它并没有影响它。

有没有办法做到这一点？

Answer 1

借助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);
    }
}

这将使它从右侧滑入。小提琴。