¿Transformación CSS3: Translate3D no afecta el eje z?
-
27-10-2019 - |
Pregunta
Tengo este fragmento implementado:
CSS
div
{
position:absolute;
-webkit-transition: all 0.3s ease-out;
}
.block
{
background:#fc0; /* YELLOW */
top:50px;
left:50px;
width:80px;
height:40px;
-webkit-transform: rotate3d(1,0,0,-55deg) rotate3d(0,0,1,30deg);
}
.block .part
{
background:#444; /* GREY */
width:inherit;
height:inherit;
-webkit-transform: translate3d(0,0,50px);
}
.block:hover .part
{
-webkit-transform: translate3d(10px,10px,20px); /* ONLY TRANSFORMS X & Y */
}
Html
<div class="block">
<div class="part"></div>
</div>
Verificar este violín Para el ejemplo en vivo.
Como puede ver, la traducción en :hover
solo afecta el .part
sobre el X- y eje y.
No se traducirá en la dirección Z.
¿Alguien que sepa lo que estoy haciendo mal?
Solución
Entiendo. Olvidé agregar -webkit-transform-style: preserve-3d;
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow