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