HTML5相对于页面进行翻译
如何将翻译应用于元素，但使其移动到页面上的某个点，而不是相对于其本身？
例如，在下面的代码中，"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>回答 1
Stack Overflow用户
发布于 2010-06-08 00:15:44
我不认为你应该使用translate()来做这件事。我认为您可以简单地计算正确的值或使用JavaScript操作transform-origin，但这有点违背了使用CSS转换的目的。
您还可以为属性设置动画，这样就可以从.activate中删除translate()，并将.card的transition属性更改为：
-webkit-transition-property: all;然后，您可以使用“常规”CSS来进行定位，剩下的工作将由转换来完成。例如，将这些属性添加到.activated
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -40px;不过，这还是有点问题的。虽然CSS可以很好地平滑地转换top、left和margin属性，但它不能平滑地转换position属性，因此当卡片被激活时，它将首先跳到左上角，然后平滑地移动到页面的中心。
我不确定是否有一个解决方案，除了定位原始卡绝对一样。
此外，使用translate()时，当您激活其中一张卡时，其他卡的位置不会受到影响。不过，在我的示例中，激活的卡被从流中取出，因此其他卡将向左移动以填充空白(如浮动元素所做的那样)。这可能也不是您想要的。但是，如果你一开始就确定了所有的位置，那就不会发生这种情况。
当然，考虑到这些问题仍然是试验性的，规范本身也有很多这样的问题：
- CSS 2D Transforms
- CSS Transitions
https://stackoverflow.com/questions/2990771
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号