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

更新请检查小提琴。 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">

小提琴：http://jsfiddle.net/VjgGY/1/

我们正在做的是说“首先把它放在视口的右边，然后因为它以div的宽度伸出来做减法translateX乘div的宽度”

Answer 2

这很好用;

.translate3d（〜“calc（100vw - 276px）”，0,0）;

Answer 3

哪里有人会这样！或者更可能是使用JS的黑客......

var container = document.getElementById('container');
var translatedChild = document.getElementById('child');

var rightEdge = container.offsetLeft + container.offsetWidth;
var translation = rightEdge - translatedChild.offsetWidth;
translatedChild.style.transform = "translate3d("+translation+",0,0);

冲洗＆amp;重复供应商前缀CSS。应该使用可变宽度容器，如果你的设计是响应性的，你必须在页面调整大小时更新它。

使用translate3d在右侧显示div

3 个答案: