web-dev-qa-db-fra.com

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

Traduire 50% des éléments d'un axe Y le fera descendre de 50% de sa propre taille, et non de 50% de la taille de ses parents, comme je le pensais. Comment demander à un élément de traduction de baser son pourcentage de traduction sur l'élément parent? Ou est-ce que je ne comprends pas quelque chose?

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

css3translatepercentagetranslate3d
62
Andrew Tibbetts

Lorsque vous utilisez le pourcentage de translation, cela fait référence à la largeur ou à la hauteur de lui-même. Jetez un coup d’œil à https://davidwalsh.name/css-vertical-center ( demo ):

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 implémentées, par opposition à des propriétés telles que haut, droite, bas, gauche, marge , qui utilise uniquement les dimensions du parent (ou en cas de positionnement absolu, qui utilise le parent le plus proche).

32
bowen

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

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

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

Ce qui fonctionne pour moi en utilisant seulement CSS est:

.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 ça marche:

  • en haut et à gauche, déplacer le widget enfant en fonction des 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 souhaitons pour le moment).
  • la traduction déplacera le widget enfant de -50% en haut et à gauche en fonction de sa taille (et non du parent). Cela signifie que le point central du widget sera déplacé exactement là où se trouvait le point en haut à gauche - qui était auparavant défini comme centre du parent et c'est ce que nous voulons.
11
zolv

Pour utiliser le pourcentage dans la propriété de traduction, vous devez utiliser le langage 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 pouvoir vous aider et me dire si vous avez un autre problème.

6
Lucas Willems

Votre affirmation est tout à fait juste au sujet des pourcentages provenant de l'élément même traduit. Au lieu d'utiliser la propriété translate dans votre cas, vous devriez utiliser le positionnement absolu pour rester relatif au div parent. J'ai absolument positionné verticalement votre div rouge ici: (n'oubliez pas d'ajouter une position par rapport au div parent. Il doit être positionné autrement que par défaut):

Js stylo fiddle ici

 body {
    margin: 0;
    width: 100%;
    height: 100%;
    }
 body > div {
    width: 200px;
    height: 200px;
    background: #ff0;
    position: relative;
    }
 body > div > div {
    width: 10%;
    height: 10%;
    -webkit-transform: translateY(-50%);
    background: #f00;
    position: absolute;
    top: 50%;
    }
3
iulial

Vous pouvez également utiliser un bloc supplémentaire et utiliser la transition, sauf le nœud enfant.

Code HTML :

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

css devrait être quelque chose comme ça

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

Son fork avec le positionnement requis sur l’URL suivante échantillon de travail

body {
margin: 0;
width: 100%;
height: 100%;
}

body>div {
position: relative;
width: 200px;
height: 200px;
background: #ff0;
}

body>div>div {
position: absolute;
left: 50%;
top: 50%;
width: 10%;
height: 10%;
background: #f00;
transform: translate(-50%, -50%);
}

remarques :

  1. vous pouvez positionner de manière absolue votre carré rouge en modifiant l’élément parent en position relative 
  2. puis en utilisant 50% en haut et 50% à gauche, le carré rouge sera positionné en fonction du coin supérieur gauche 
  3. using transform: translate (-50%, - 50%) positionnera le carré rouge en fonction de son centre 
1
Mhmad Q.Abdelhaq

Vous pouvez rendre l'élément absolu positionné et utiliser les propriétés left et top pour prendre le pourcentage en tant que parent.

1
user4993573

La solution à ce problème consiste à ne pas utiliser du tout la traduction. Lorsque vous traduisez un élément, le pourcentage que vous sélectionnez est basé sur sa propre hauteur.

Si vous souhaitez positionner l'élément en fonction de la hauteur du parent, utilisez top: 50%;

Donc, le code ressemblera à ceci:

body {
    margin: 0;
    width: 100%;
    height: 100%;
}
body > div {
    width: 200px;
    height: 200px;
    background: #ff0;
    position: relative;
}
body > div > div {
    position: absolute;
    top: 50%;
    width: 10%;
    height: 10%;
/*     -webkit-transform: translateY(50%); */
    background: #f00;
}
0
Vlad