如何将翻译应用于元素，但使其移动到页面上的某个点而不是相对于自身？
例如，在下面的代码中，“card”元素将相对于它们的起始位置移动 50、100。相反，我想要的是将其移动到页面的中心。
<html>
<head>
<style>
.face {
-webkit-backface-visibility: hidden;
position: absolute;
height: 140;
width: 80;
overflow: hidden;
}
.card {
height: 100;
width: 80;
float: left;
-webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
margin-left: 5px;
-webkit-transition-property: transform;
-webkit-transition-duration: 0.25s;
-webkit-transition-timing-function: ease-out;
}
.activated {
-webkit-transform: scale(2) translate(50px, 100px);
-webkit-transition-duration: 0.35s;
-webkit-transition-timing-function: ease-in;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function () {
$('.card').click(function (e) {
e.preventDefault();
$(this).toggleClass("activated");
});
});
</script>
</head>
<body>
<div class="card">
<div class="face front">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" />
<span>blah!</span>
</div>
<div class="face back">explanation</div>
</div>
<div class="card">
<div class="face front">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" />
<span>blah!</span>
</div>
<div class="face back">explanation</div>
</div>
<div class="card">
<div class="face front">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" />
<span>blah!</span>
</div>
<div class="face back">explanation</div>
</div>
<div class="card">
<div class="face front">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" />
<span>blah!</span>
</div>
<div class="face back">explanation</div>
</div>
</body>
</html>
最佳答案
我认为您不应该为此使用 translate()。我想您可以简单地计算出正确的值或使用 JavaScript 操作 transform-origin，但这种做法违背了使用 CSS 转换的目的。
您也可以为属性设置动画，因此您可以从 .activate 中删除 translate() 并更改 .card 的过渡属性到:
-webkit-transition-property: all;
然后您可以使用“常规”CSS 进行定位，过渡将完成剩下的工作。例如。将这些属性添加到 .activated:
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -40px;
不过，这有一点问题。虽然 CSS 可以很好地平滑过渡 top、left 和 margin 属性，但它不能平滑过渡 position属性，所以当卡片被激活时，它会先跳到左上角，然后平滑地移动到页面的中心。
除了绝对定位原始卡片之外，我不确定是否有其他解决方案。
此外，使用 translate()，当您激活其中一张时，其他 卡片的位置不会受到影响。不过，在我的示例中，激活的卡片被移出流程，因此其他卡片将向左移动以填补空白(就像 float 元素一样)。那可能也不是你想要的。不过，如果您绝对将所有这些都放在开始位置，就不会发生这种情况。
当然，考虑到它们仍处于实验阶段，规范本身中有很多关于此类问题的问题:
关于javascript - HTML5 翻译相对于页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2990771/