Traduire les valeurs de pourcentage X et Y en fonction de la hauteur et de la largeur des éléments ?

Question

La translation de 50 % de l'axe Y d'un élément le déplacera vers le bas à 50 % de sa propre hauteur, et non à 50 % de la hauteur des parents comme je m'y attendrais. Comment puis-je dire à un élément en cours de traduction de baser son pourcentage de traduction sur l'élément parent ? Ou bien n'ai-je pas compris quelque chose ?

http://jsfiddle.net/4wqEm/2/

Answer 1

Lorsqu'on utilise le pourcentage dans la traduction, il s'agit de la largeur ou de la hauteur de l'objet. Regardez https://davidwalsh.name/css-vertical-center ( Démo ):

Une chose intéressante à propos des transformations CSS est que, lorsqu'elles sont appliquées avec des valeurs en pourcentage, elles basent cette valeur sur les dimensions de l'élément sur lequel elles sont mises en œuvre, par opposition aux propriétés telles que top, right, bottom, left, margin et padding, qui utilisent uniquement les dimensions du parent (ou dans le cas d'un positionnement absolu, qui utilise son parent relatif le plus proche).

Answer 2

Vous pouvez utiliser vw et vh pour traduire en fonction de la taille de la fenêtre d'affichage.

@keyframes bubbleup {
  0% {
    transform: translateY(100vh);
  }

  100% {
    transform: translateY(0vh);
  }
}

Answer 3

Ce qui fonctionne pour moi en utilisant uniquement CSS es:

.child {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* Backward compatibility */
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

Comment cela fonctionne :

• Le positionnement en haut et à gauche déplace le widget enfant selon les coordonnées du parent. Le coin supérieur gauche du widget enfant apparaîtra exactement au centre du parent (ce n'est pas ce que nous voulons pour le moment).
• La traduction déplacera le widget enfant de -50% vers le haut et la gauche en fonction de sa taille (et non du parent). Cela signifie que le point central du widget sera déplacé exactement à l'endroit où se trouvait le point haut-gauche - qui était précédemment défini comme le centre d'un parent, et c'est ce que nous voulons.

Answer 4

Pour utiliser le pourcentage dans la propriété translate, vous devez utiliser Javascript : http://jsfiddle.net/4wqEm/27/

Code HTML :

<div id="parent">
    <div id="children"></div>
</div>​​​​​​​​​​​​​

Code CSS :

#parent {
    width: 200px;
    height: 200px;
    background: #ff0;
}
#children {
    width: 10%;
    height: 10%;
    background: #f00;
}

Code Javascript :

parent = document.getElementById('parent');
children = document.getElementById('children');

parent_height = parent.clientHeight;
​children_translate = parent_height * 50/100;
children.style.webkitTransform = "translateY("+children_translate+"px)";​​​​​​​​​​​​​​​​​​​​​​​​​​

J'espère avoir pu vous aider et dites-moi si vous avez d'autres problèmes.

Answer 5

Vous pouvez également utiliser un bloc supplémentaire et utiliser la transition pour celui-ci, à l'exception du nœud enfant.

Code HTML :

<div id="parent">
    <div id="childrenWrapper">    
        <div id="children"></div>
    </div>
</div>​​​​​​​​​​​​​

css devrait être quelque chose comme ceci

#parent {
    position: relative;
    width: 200px;
    height: 200px;
    background: #ff0;
}
#childrenWrapper{
    width: 100%;
    height: 100%;
}
#children {
    width: 10%;
    height: 10%;
    background: #f00;
}