Problème de profondeur avec translateZ

Bonjour,

Je n'arrive pas à gérer correctement le z-index de mes éléments (boutons, etc.) affectés par la transformation translateZ();

Il semblerait que l'ordre des éléments dans le fulx HTML soit prioritaire, et ce quelque-soit la valeur de mon translateZ ou du z-index fourni.

Voici un exemple ici, avec un :hover sur mes boutons, qui sont censés passer "au dessus" de tout le reste, sans succès : http://www.nkod4.com/src/home.html#buttons

Merci d'avance

ps : Voici le code (sass) des dits boutons (y a pas toutes les variables mais c'est pour voir l'idée grosso modo) :

.btn-3d {
    min-width: auto;
    perspective: $btn-depth !important;
    position: relative;

.btn {
    @extend %btn;
    @extend %radius-s;
    @extend %no-select;
    @extend .d-lvl-0 !optional;
    display: inline-block;
    text-decoration: none;
    font-family: $btn-font-family;
    padding: $btn-padding;
    margin: $btn-3d-margin;
    background-color: $btn-bg-color;
    border: $btn-border;
    border-color: $btn-border-color;

    &:hover {
        @extend .d-lvl-1 !optional;
    }

    &:active {
        @extend .d-lvl-2 !optional;
    }
.d-lvl-0 {
    @extend %opacity-high;
    @extend %obj-3d;
    @extend %box-shadow-xs;
    // z-index: 0;
    transform: translateZ($base-lvl-0);
    // transform: perspective(100px);
}

.d-lvl-1 {
    @extend %opacity-max;
    @extend %obj-3d;
    @extend %box-shadow-s;
    transform: translateZ($base-lvl-1);
}

.d-lvl-2 {
    @extend %opacity-high;
    @extend %obj-3d;
    @extend %box-shadow-m;
    transform: translateZ($base-lvl-2);
}

Modifié par NkOD4 (03 Oct 2019 - 17:47)

Hello,

Je ne suis pas sûr de bien comprendre puisque de mon côté je vois bien le bouton passer par-dessus les autres.

On peut le voir nettement si on l'agrandit via scale, en plus de ta translation : translateZ(2.5px) scale(1.5) (par exemple)

En fait j'ai peut-être compris ce que tu veux dire.

Il se trouve que chaque bouton (a) se trouve dans un élément (span) qui est en position relative, ce qui crée un "stacking context".

Modifier la valeur de z-index de chaque <a> ne leur permettra pas de sortir de leur contexte créé par leur parent et qui dépend effectivement de l'ordre du flux... sauf si tu changes la valeur de z-index du parent survolé.

Merci beaucoup pour cette réponse rapide

Je vois ce que tu veux dire... Du coup je devrais soit virer les <span>, soit faire le translateZ sur les <span> eux-même et non sur les <a>.

Je vais tester de ce pas voir ce qui fonctionne le mieux !

Je viens de tester, sans les <span>, en plaçant les <a> directement dans le <div> qui sert désormais de référentiel pour la perspective. Le problème de profondeur est résolu, mais le souci désormais, c'est le référentiel... J'aurais aimé que chaque élément face un translate selon son axe d'origine (50% 50%), ce qui était pratique avec des <span> pour chacun.

Là du coup c'est le milieu du <div> qui définit le point de fuite, ce qui peut donner un résultat un peu touchy ^^ J'ai exagéré l'effet de perspective pour mieux se rendre compte :

http://www.nkod4.com/src/home.html#buttons

Bon je sais que dans un cas concret je ne me retrouverai jamais avec un tel paquet de boutons, mais pour d'autres cas de figure avec d'autre type d'objets j'aimerais bien trouver une solution viable...
Je sais qu'il existe des frameworks ou tout est déjà préfabriqué, mais je préfère réinventer la roue, je trouve ça plus formateur

Merci d'avance pour vos retours !

Pourquoi pas un simple `transform: scale(…)` ?

oups: un peu de retard sur Raphaël
Modifié par Yordi (04 Oct 2019 - 09:29)

Yep, si c'est juste pour le résultat autant opter pour un truc simple, clairement ^^

Mais là comme je voulais piger le pourquoi du comment, ça m'a donné l'occasion de me pencher sérieusement sur les notions de stacking context et de comprendre comment les choses sont censées fonctionner selon les normes.

Et effectivement, j'avais des lacunes sur le sujet ! Maintenant j'y vois plus clair, notamment grâce à cet article très intéressant :

https://iamvdo.me/blog/comprendre-z-index-et-les-contextes-dempilement#ce-que-personne-ne-vous-dit-sur-z-index

Bonne journée à tous et merci pour vos retours