Discussion :

[dré kam]

Bonjour,

Je viens de lire cet article sur l'optimisation des effets parallax en utilisant du CSS (sans JS et sans jouer avec les margin ou les background-position : https://developers.google.com/web/up...nt-parallaxing

J'ai un problème à ce niveau :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
.container {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  perspective: 1px;
  perspective-origin: 0 0;
}
 
.parallax-child {
  transform-origin: 0 0;
  transform: translateZ(-2px) scale(3);
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="container”>
  <div class="parallax-child”></div>
</div>

Mon réel problème, ce sont les propriétés transform-origin et perspective-origin. J'ai été voir sur W3Schools et MSDN et je comprends vaguement ce que ça fait, mais j'ai du mal à comprendre leur utilité dans ce cas précis. Je vois que les valeurs par défaut sont 50% 50%, alors pourquoi faut-il les mettre à 0 dans ce cas?

Merci

[NoSmoking]

Bonjour,
peut être que la lecture de perspective-origin sur MDN te sera plus « limpide » !

Sans oublier sur DVP :

• Les transformations 3D en CSS3
• Propriétés de transformation et d'animation (CSS 3)

[dré kam]

Les deux articles m'ont permis de comprendre mieux ce que ça fait, mais je ne vois toujours pas pourquoi il faut mettre ces valeurs à 0 0 dans ce cas précis.

[NoSmoking]

... mais je ne vois toujours pas pourquoi il faut mettre ces valeurs à 0 0 dans ce cas précis.

si tu ne fais pas cette initialisation la rotation se fera à partir du centre de l'élément et non à partir d'en haut à gauche.

Met en commentaire la ligne concernée pour t'en rendre compte, profites en aussi pour tester les autres possibilités.