28100 sujets

CSS et mise en forme, CSS3

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 Smiley smile

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)
Administrateur
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)
Administrateur
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 Smiley cligne

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 ! Smiley cligne
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 Smiley cligne

Merci d'avance pour vos retours !
Administrateur
Je comprends le souci et cela risque d'être... un souci.

Par contre je ne comprends pas forcément l'intérêt d'un translateZ. Visuellement, on dirait que tu souhaites un simple agrandissement du bouton, je me trompe ?
Si c'est ce que tu souhaites, il serait plus simple d'appliquer un scale sur ton bouton (l'avantage sera que l'axe de la transformation sera le centre du bouton).
Modérateur
Pourquoi pas un simple `transform: scale(…)` ?

oups: un peu de retard sur Raphaël Smiley rolleyes
Modifié par Yordi (04 Oct 2019 - 09:29)
Merci pour vos réponses Smiley cligne

Effectivement, dans ce cas présent, un simple scale ferait l'affaire...
Cependant, c'est juste un exercice dans le but de gérer la 3D de manière plus avancée à court terme. Je compte me servir d'autres manip du genre translate, rotate etc. et j'aimerais piger le fonctionnement global pour pas me retrouver le bec dans l'eau par la suite...

Je vous tiendrai au courant si je trouve une solution viable qui englobe tous les cas de figure.

Encore merci, bonne journée à vous !
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 Smiley smile