css3 - para - ¿Traducir los valores porcentuales X e Y basados en los elementos de alto y ancho?

transform translate css

Question

Al traducir un eje Y de elementos, el 50% lo moverá hacia abajo un 50% de su propia altura, no el 50% de la altura de los padres, como era de esperar. ¿Cómo le digo a un elemento de traducción que base su porcentaje de traducción en el elemento padre? ¿O no estoy entendiendo algo?

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

Answer 1

Cuando se usa porcentaje en traducir, se refiere al ancho o alto de sí mismo. Eche un vistazo a https://davidwalsh.name/css-vertical-center ( demo ):

Una cosa interesante acerca de las transformaciones CSS es que, al aplicarlas con valores porcentuales, basan ese valor en las dimensiones del elemento sobre el que se implementan, a diferencia de las propiedades superior, derecha, inferior, izquierda, margen y relleno , que solo usa las dimensiones de los padres (o en el caso del posicionamiento absoluto, que usa su elemento primario relativo más cercano).

Answer 2

La solución a este problema es no usar traducir en absoluto. Cuando está traduciendo un elemento, el porcentaje que selecciona se basa en su propia altura.

Si desea posicionar el elemento según la altura del padre, use arriba: 50%;

Entonces el código se verá así:

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;
}

Answer 3

Lo que funciona para mí usando solo 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%);
}

Cómo funciona:

• el posicionamiento superior e izquierdo mueve el widget hijo según las coordenadas principales. La esquina superior izquierda del widget infantil aparecerá exactamente en el centro del elemento principal (esto no es lo que queremos en este momento).
• la traducción moverá el widget infantil -50% hacia arriba y hacia la izquierda según su tamaño (no el elemento principal). Significa que el punto central del widget se moverá exactamente donde estaba el punto superior izquierdo, que previamente se configuró como el centro de un elemento primario, y esto es lo que queremos.

Answer 4

Para usar el porcentaje en la propiedad translate, debe usar Javascript: http://jsfiddle.net/4wqEm/27/

Código HTML :

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

Código CSS:

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

Código 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)";​​​​​​​​​​​​​​​​​​​​​​​​​​

Espero poder ayudarte y decirme si tienes algún otro problema.

Answer 5

Puede hacer que el elemento se ubique en posición absoluta y usar la propiedad izquierda y superior para tomar el valor porcentual como principal.

Answer 6

Puede usar vw y vh para traducir en función del tamaño de la ventana gráfica

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

Answer 7

Se bifurcó con el posicionamiento requerido en la siguiente muestra de trabajo de URL

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%);
}

notas:

1. puede posicionar de forma absoluta su cuadrado rojo cambiando el elemento principal por posición relativa
2. luego, usando el 50% de la parte superior y el 50% de la izquierda, colocará el cuadrado rojo de acuerdo con la esquina superior izquierda
3. Usando transform: translate (-50%, - 50%) posicionará el cuadrado rojo según su centro

Answer 8

Su afirmación tiene toda la razón sobre los porcentajes que provienen del elemento traducido. En lugar de usar la propiedad de traducir en su caso, debe usar el posicionamiento absoluto para mantenerse relacionado con el div principal. Definitivamente posicioné verticalmente tu div rojo aquí: (no te olvides de agregar posición relativa al div principal. Tiene que estar posicionado diferente al predeterminado estático):

JS violín pluma aquí

 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%;
}

Answer 9

También puede usar un bloque adicional y usar la transición para él, excepto el nodo secundario

Código HTML :

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

CSS debería ser algo como esto

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