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

这将使其从右侧滑入。的 Fiddle.

CSS3转换：translateX等价于右边

1 个答案: