2

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

例如，在下面的代码中，“卡片”元素将相对于它们的起始位置移动 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>
4

1 回答 1

2

我认为您不应该translate()为此使用。我想您可以简单地计算正确的值或transform-origin使用 JavaScript 进行操作，但这违背了使用 CSS 转换的目的。

您也可以为属性设置动画，因此您可以删除translate()from.activate并将转换属性更改为.card to：

-webkit-transition-property: all;

然后，您可以使用“常规”CSS 进行定位，其余的将由过渡完成。例如，将这些属性添加到.activated：

position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -40px;

不过，这有点问题。虽然 CSS 可以很好地平滑过渡top,left和margin属性，但它不能平滑过渡position属性，所以当卡片被激活时，它会先跳到左上角，然后平滑地移动到页面的中心。

除了绝对定位原始卡之外，我不确定是否有解决方案。

此外，使用，激活其中一张时，其他卡translate()的位置不会受到影响。但是，在我的示例中，已激活的卡已从流程中取出，因此其他卡将向左移动以填补空白（就像浮动元素一样）。那也可能不是你想要的。但是，如果您绝对将所有这些都放在开头，那将不会发生。

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

于 2010-06-07T16:15:43.863 回答