Scroll horizontal inversé CSS

Bonjour à tous

J'essaie en vain de faire une page avec un scroll horizontal inversé !
un peu comme dans ce post : lien

... mais en version horizontal, dans mon codepen j'ai le mis le code de mon scroll horizontal mais je n'arrive pas à l'inverser !!
Le but est d'avoir un scroll non pas de gauche à droite mais de droite à gauche
au chargement de la page on arriverai (si on reste sur mon codepen) par la page last et ensuite on scroll pour arriver à la div 1 le tout en moletant la souris normalement c'est a dire de haute en bas...

Merci de votre aide
Modifié par zero974 (01 Jul 2019 - 22:53)

Bonjour,

il est plus simple de partir de transform:scale(-x,x) ;
https://codepen.io/gc-nomade/pen/ydjypy

en gros:

[scroll] {
  overflow:auto;
  transform:scale(-1,1)
}

section {
  transform:scale(-1,1);
/* et au choix  pour modifier le contexte de formatage et laisser naturellement l'element debordé des 100% de largeur de la fenêtre : */
  display:inline-block;/* ou */
  float:left;
}

Modifié par gcyrillus (02 Jul 2019 - 12:29)

Sympa !! merci, mais là dans ton exemple le scroll est désactivé (je parle celui de la molette de la souris) et je cheche que ca défile lorsque on molette de haut vers le bas

... en tout cas super ton code

j'ai finalement réussi avec mon code codepen mais ca bug des que l'on resize la fenetre de facon non homothétique... :'(

je vais regarde avec ton code... mais si tu as une solution je suis preneur

EDIT :: lien ça marche ! derniere étape inverser le sens des div coloré de 90 degrés
Modifié par zero974 (02 Jul 2019 - 16:16)

Ooohh milles mercis l'ami !!

la meilleure solution serait de faire ca en JS... je me doute mais je suis vraiment nul en js ... déjà que j'ai besoin d'aide pour le css....
Modifié par zero974 (02 Jul 2019 - 21:08)