CSS3 变换：translateX 等价于右

【问题标题】：CSS3 transform: translateX equivalent for rightCSS3 变换：translateX 等价于右
【发布时间】：2013-10-08 13:48:25
【问题描述】：

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

有办法吗？

【问题讨论】：

标签： css transform

【解决方案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);
    }
}

这将使它从右侧滑入。 Fiddle.

【讨论】：