我有一个元素列表,并根据具体动作,我想应用css-transform translate将其移动到窗口的中心.我知道css-transform用于相对移动一个元素,但我想知道是否可以将它锚定在某个地方,即在窗口中间(灯箱式).我正在看一个类似于iPad音乐应用的动画,其中专辑封面翻转和中心.
注意：我想使用css-transforms,因为它避免了周围元素的重排.
南
编辑：我创建了一个JSfiddle以便更好地说明：http://jsfiddle.net/bdtZc/,相关行：
.card:focus {
-webkit-transform: rotateY(180deg);
}
@R_403_323@
2017年更新
由于我刚收到另一个关于这个答案的upvote,我以为我会重新审视它.
对于当前的浏览器,您应该从其他答案中获得转换(-50％,– 50％)技术,但这取决于您的内容容器的设置方式可能不会导致窗口的中心;它可能是您的容器的中心,可能比窗口更小或更大.
最新的浏览器支持视口单元(vh,vw),它可以准确地为您提供视口中心所需的内容.由于滚动,从当前位置到视口中心的动画将是一个不同的问题.
http://caniuse.com/#feat=viewport-units
https://developer.mozilla.org/en-US/docs/Web/CSS/length(见vh,vw)
没有CSS变换
您可以在不使用绝对定位的css-transform的情况下完成此操作：
(完整代码：http://jsfiddle.net/wkgWg/)
.posDiv
{
position:absolute;
top:0;
left:0;
margin:0;
border:1px solid red;
-moz-transition:all 2s;
-webkit-transition:all 2s;
-o-transition:all 2s;
transition:all 2s;
}
.triggerElement:hover .posDiv
{
top:50%;
left:50%;
margin-left:-50px;
margin-top:-50px;
-moz-transition:all 2s;
-webkit-transition:all 2s;
-o-transition:all 2s;
transition:all 2s;
}
使用CSS Transform
如果您想继续使用css-Transform,则需要使用JavaScript计算转换的“中心”或结束位置,然后在运行时生成并附加转换语句.您的原点变换向量需要从“中心到屏幕”向量中减去.
这是通过jQuery.transit plugin by Rico Sta. Cruz使用css-transform(支持的地方)的javascript版本.
(完全小提琴这里：http://jsfiddle.net/ZqpGL/1/)
$(function(){
var $cards = $('.card');
var cardInFocus = null;
$cards.each(function(index,elem){
var $elem = $(elem);
var pos = $elem.position();
$(elem).data('orig-x',pos.left);
$(elem).data('orig-y',pos.top);
});
var reset = function(){
if(cardInFocus){
$(cardInFocus).transition({x:0,y:0});
};
};
$cards.focus(function(e){
reset();
cardInFocus = this;
var $doc = $(document);
var centerX = $doc.width() / 2;
var centerY = $doc.height() / 2;
var $card = $(this);
var origX = $card.data('orig-x');
var origY = $card.data('orig-y');
$(this).transition({x:centerX - origX,y:centerY-origY});
});
$cards.blur(function(e){
reset();
});
});
