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

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