2

我想在右侧显示一个 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 的相同切换功能。

请帮我解决这个问题。

4

3 回答 3

2 
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 的宽度，所以用 div 的宽度减去 translateX”

于 2014-07-28T15:47:22.133 回答
2

这很好用；

.translate3d(~"calc(100vw - 276px)", 0, 0);

于 2015-01-10T14:09:10.240 回答
0

只要有强大的意志，必有一条路为你开！或者更可能是使用 JS 的 hack ......

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

冲洗并重复供应商前缀 CSS。应该使用可变宽度容器，但如果您的设计响应式设计，则必须在页面调整大小时对其进行更新。

于 2014-07-28T15:55:33.943 回答