it-swarm.com.de

CSS-Transformation In Fenstermitte übersetzen

Ich habe eine Liste von Elementen und möchte bei einer bestimmten Aktion die CSS-Transformation anwenden, um sie in die Mitte des Fensters zu verschieben. Ich weiß, dass CSS-Transformation verwendet wird, um ein Element relativ zu verschieben, aber ich habe mich gefragt, ob es möglich ist, es absolut irgendwo zu verankern, d. H. In der Mitte des Fensters (Lightbox-Stil). Ich schaue mir eine Animation an, die der iPad-Musik-App ähnelt, bei der das Albumcover umgedreht und zentriert wird.

Hinweis: Ich möchte CSS-Transformationen verwenden, da das Umfließen der umgebenden Elemente vermieden wird.

Nam

Edit: Ich habe eine JSfiddle zur besseren Veranschaulichung erstellt: http://jsfiddle.net/bdtZc/ , relevante Zeile:

.card:focus {
   -webkit-transform: rotateY(180deg);
}
10
nambrot

Update 2017

Da ich für diese Antwort gerade eine weitere Gegenstimme erhalten habe, dachte ich, ich würde sie noch einmal durchgehen.

Mit aktuellen Browsern sollten Sie mit der Transformationstechnik (-50%, -50%) aus anderen Antworten viel Glück haben, aber je nachdem, wie Ihre Inhaltscontainer eingerichtet sind, wird die Mitte des Fensters möglicherweise nicht angezeigt. Dies kann die Mitte Ihres Containers sein, die kleiner oder größer als das Fenster sein kann.

Die neuesten Browser unterstützen Ansichtsfenster-Einheiten (vh, vw), mit denen Sie genau das finden, wonach Sie suchen, um das Ansichtsfenster zu zentrieren. Die Animation vom aktuellen Standort zum Ansichtsfenster-Center ist aufgrund des Bildlaufs ein anderes Problem.

http://caniuse.com/#feat=viewport-unitshttps://developer.mozilla.org/en-US/docs/Web/CSS/length (siehe vh, vw)

Ohne CSS-Transformation

Sie können dies ohne Verwendung von CSS-Transformation durch Verwendung der absoluten Positionierung erreichen:

(vollständiger Code hier: 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;
}

Mit CSS Transform

Wenn Sie weiterhin mit CSS-Transformation arbeiten möchten, müssen Sie das "Zentrum" oder den Endpunkt Ihrer Transformation mit JavaScript berechnen und dann zur Laufzeit eine Transformationsanweisung generieren und anhängen. Ihr Origin-Transformationsvektor müsste vom Vektor "Mitte zu Bildschirm" subtrahiert werden.

Hier ist eine Javascript-Version mit CSS-Transformation (sofern unterstützt) über das jQuery.transit-Plugin von Rico Sta. Cruz .

(Volle Geige hier: http://jsfiddle.net/ZqpGL/263/ )

$(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.on('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.on('blur', function(e) {
        reset();
    });

});
12
Ryan Rahlf

Ein Artikel bei CSS-Tricks ( http://css-tricks.com/centering-percentage-widthheight-elements/ ) wies darauf hin, dass man eine Mischung aus absoluter Positionierung und Übersetzung verwenden könne, ohne auf die Verwendung von zurückzugreifen JS.

Dies hilft, den Reflow zu begrenzen und Ihr Element auch bei Größenänderungen des Elements oder des Bildschirms in der Mitte zu halten.

.center {
    position: absolute;
    left: 50%;
    top: 50%;

    /*
    Nope =(
    margin-left: -25%;
    margin-top: -25%;
    */

    /* 
    Yep!
    */
    transform: translate(-50%, -50%);

    /*
    Not even necessary really. 
    e.g. Height could be left out!
    */
    width: 40%;
    height: 50%;
}
10
pouncyisdead

Sie können dies jetzt in reinem CSS mit der Einheit vh (Ansichtshöhe) tun. Es ist immer relativ zur Bildschirmgröße, nicht zum Element selbst:

/* position element in middle of screen */
translateY(calc(50vh))

Wenn Sie also die Höhe des Elements kennen (z. B. height:320px), können Sie es genau in die Mitte des Bildschirms verschieben.

/* moves the element down exactly off the bottom of the screen */
translateY(calc(50vh - 160px))
6
phreakhead

Ich würde empfehlen, eine JS-Lösung dafür in Betracht zu ziehen, da dies für Bilder unterschiedlicher Größe problematisch sein wird, aber da Sie nach einer CSS-Lösung gefragt haben ...

Sie können die Keyframe-Animation für diesen Effekt folgendermaßen verwenden: jsFiddle

.card:focus {
    transition:all 2s;
    position: absolute;
    animation: center 3s forwards;
}

@keyframes center {
    0% {
        top:0%;
        left:0%;
    }
    100% {
        top:45%;
        left:45%;
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
}

Bearbeiten: Hier ist ein rau bessere jQuery-Version mit

position:relative;

jsFiddle

$('.card').focusin(function () {
    var tc = $(window).height() / 2 - $('.card').height() / 2;
    var lc = $(window).width() / 2 - $('.card').width() / 2 - $(this).offset().left;

    $(this).animate({
        left: lc,
        top: tc
    });
});

$('.card').focusout(function () {
    $(this).animate({
        top: 0,
        left: 0
    });
});
0
apaul