¿Se desbordará el conflicto oculto con Translate3d?
Hola, se verá afectado. Consulta el siguiente código para obtener más detalles:
*{
margen: 0;
relleno: 0;
}
.dad{
ancho: 300px;
alto: 300px;
borde: 4px sólido #00FFDC;
posición: absoluta;
arriba : 50%;
izquierda: 50%;
margen: -100px 0 0 -100px;
desbordamiento-x: oculto;
}
.dad:hover div{
-webkit-transform: traducir3d(0px,-25px,0);
-moz-transform: traducir3d(0px,-25px,0);
-ms-transform: traducir3d(0px,-25px,0);
-o-transformar: traducir3d(0px,-25px ,0);
transformar: traducir3d(0px,-25px,0);
}
.son{
ancho: 400px;
alto: 100%;
alto de línea: 300px;
color: blanco;
fondo: #a900ff;
sangría de texto: 38px;
-webkit-transition: todos los 0,8 s;
-moz-transition: todos los 0,8 s;
-ms-transition: todos los 0,8 s;
-o-transition: todos los 0,8 s;
transición: todos los 0,8 s;
} p>
Como puede ver en el código anterior, overflow-x: oculto; en el cuadro padre recorta la transformación: traducir3d(0px,-25px,0); box, es decir, la parte que excede la dirección vertical del cuadro hijo o se mueve hacia arriba se recorta. No conozco la solución específica.