css - 使用translate3d在右侧显示div

Question

我想在右侧显示一个div，与下面的CSS完全相同，但使用translate3d

div {
   position: absolute;
   right: 0;
   top: 0;
}

我尝试了以下方法，但它仅在 Chrome 中有效。

div {
    -webkit-transform: translate3d(100vw,0,0);
    -moz-transform: translate3d(100vw,0,0);
    -o-transform: translate3d(100vw,0,0);
    transform: translate3d(100vw,0,0);
}

更新 请检查 fiddle 。 http://jsfiddle.net/7LLbu/ 我需要使用translate3d 实现相同的切换功能。

请帮我解决这个问题。

Answer 1

html, body {
    margin: 0;
    padding: 0;
}

.float-left3d {
    -webkit-transform: translate3d(100vw,0,0) translateX(-100%);
    -moz-transform: translate3d(100vw,0,0) translateX(-100%);
    -o-transform: translate3d(100vw,0,0) translateX(-100%);
    transform: translate3d(100vw,0,0) translateX(-100%);
}

div {
    width: 250px;
    height: 400px;
    background: green;
}

<div class="float-left3d">

fiddle :http://jsfiddle.net/VjgGY/1/

我们所做的是说“首先将它放在视口(viewport)的右侧，然后因为它突出了 div 的宽度，所以用 div 的宽度减去 translateX”