web-dev-qa-db-fra.com

CSS Transform Traduire au centre de la fenêtre

J'ai une liste d'éléments et sur une action spécifique, j'aimerais appliquer la transformation css-transform pour la déplacer au centre de la fenêtre. Je sais que css-transform est utilisé pour déplacer relativement un élément, mais je me demandais s’il était possible de l’ancrer absolument quelque part, c’est-à-dire au milieu de la fenêtre (style lightbox). Je suis en train de regarder une animation similaire à l'application iPad Music, où la couverture de l'album bascule et se centre.

Remarque: je veux utiliser css-transforms car cela évite le reflux des éléments environnants.

Nam

Edit: J'ai créé un JSfiddle pour une meilleure illustration: http://jsfiddle.net/bdtZc/ , ligne correspondante:

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

Mise à jour 2017

Comme je viens de recevoir un autre vote positif pour cette réponse, je pensais la revoir. 

Avec les navigateurs actuels, vous devriez avoir de la chance avec la technique de transformation (-50%, -50%) des autres réponses, mais selon la configuration de vos conteneurs de contenu, le résultat ne correspond pas nécessairement au centre de la fenêtre. il peut s'agir du centre de votre conteneur, qui peut être plus petit ou plus grand que la fenêtre. 

Les derniers navigateurs prennent en charge les unités de fenêtres (vh, vw), qui vous donneraient exactement ce que vous cherchez en ce qui concerne le centrage de la fenêtre. L'animation de l'emplacement actuel au centre de visualisation serait un problème différent en raison du défilement.

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

Sans transformation CSS

Vous pouvez accomplir cela sans utiliser css-transform en utilisant le positionnement absolu:

(code complet ici: 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;
}

Avec CSS Transform

Si vous souhaitez continuer à utiliser CSS-Transform, vous devez calculer le "centre" ou l'emplacement final de votre transformation à l'aide de JavaScript, puis générer et attacher une instruction de transformation au moment de l'exécution. Le vecteur de transformation de votre origine doit être soustrait du vecteur "centre à écran".

Voici une version javascript utilisant css-transform (là où elle est supportée) via le plugin jQuery.transit de Rico Sta. Cruz .

(Full violon ici: 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

Un article de CSS-Tricks ( http://css-tricks.com/centering-percentage-widthheight-elements/ ) indique qu’il est possible d’utiliser un mélange de positionnement absolu et de translation, sans recourir à JS.

Cela aide à limiter le refoulement et maintient votre élément centré même pendant les changements de taille de l'élément ou de l'écran.

.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

Vous pouvez le faire maintenant en CSS pur avec l’unité vh (hauteur de la vue). C'est toujours relatif à la taille de l'écran, pas à l'élément lui-même:

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

Ainsi, si vous connaissez la hauteur de l'élément (par exemple, height:320px), vous pouvez le déplacer exactement au centre de l'écran.

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

Je recommanderais de rechercher une solution JS pour cela, car cela poserait problème pour des images de différentes tailles, mais puisque vous avez demandé une solution CSS ...

Vous pouvez utiliser une animation par images clés pour cet effet, comme suit: 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);
    }
}

Edit: Voici un rugueux meilleure version de jQuery utilisant

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