CSS转换转换为窗口中心

我有一个元素列表,并根据具体动作,我想应用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();
    });

});

原文地址：https://www.jb51.cc/css/215522.html