我有一个元素列表,并根据具体动作,我想应用css-transform translate将其移动到窗口的中心.我知道css-transform用于相对移动一个元素,但我想知道是否可以将它锚定在某个地方,即在窗口中间(灯箱式).我正在看一个类似于iPad音乐应用的动画,其中专辑封面翻转和中心.
注意:我想使用css-transforms,因为它避免了周围元素的重排.
南
编辑:我创建了一个JSfiddle以便更好地说明:http://jsfiddle.net/bdtZc/,相关行:
.card:focus { -webkit-transform: rotateY(180deg); }
解决方法
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(); }); });