Question

如何将翻译应用于元素，但是将其移动到页面上的某个点而不是相对于自身？

例如，在下面的代码中，“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>

Answer 1

我认为您不应该使用translate()。我想您可以简单地计算正确的值或使用JavaScript操纵transform-origin，但这种方法会破坏使用CSS转换的目的。

您也可以为属性设置动画，这样您就可以从translate()移除.activate并将.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()时，激活其中一张其他卡的位置不会受到影响。但是，在我的示例中，激活的卡片已从流程中取出，因此其他卡片将向左移动以填补间隙（如浮动元素所做的那样）。那也许不是你想要的。但是，如果你绝对将所有这些都放在首位，那就不会发生。

当然，考虑到它们仍处于试验阶段，规范中有很多关于这类问题的问题：

HTML5相对于页面进行翻译

1 个答案: