Légèrement en rotation sur le bord de la fenêtre sans barre de défilement horizontale apparaissant

Question

En haut d'une page, j'ai créé quatre boîtes/carreaux qui tournent légèrement en vol stationnaire (rotation de 5 degrés). Les boîtes sont positionnées et dimensionnées via flexbox pour couvrir toute la largeur de la fenêtre. En survolant la case la plus à droite, son coin en bas à droite sort de la fenêtre sur la droite, ce qui fait apparaître une barre de défilement horizontale.

Je souhaite éviter l'apparition de la barre de défilement. J'ai essayé de le faire en réglant pour les <div> contenant les boîtes, mais cela interfère avec l'affichage de la rotation des boîtes en général car elles les coupent au niveau de la bordure de la div lorsqu'elles tournent. Je voudrais garder l'effet de la rotation des boîtes entièrement visible et éviter la barre de défilement horizontale en même temps.

Voici mon html et css ainsi qu'une jsfiddle de la page (s'il vous plaît noter que la barre de défilement horizontale ne semble pas toujours dans le jsFiddle, en fonction de la taille de la fenêtre dans laquelle le code est en cours d'exécution):

.banner { 
 
    margin: 0px; 
 

 
    font-size: 10vw; 
 
    line-height: 1.2; 
 
    
 
    overflow-x: hidden; 
 
} 
 

 
.flex { 
 
    display: flex; 
 
} 
 

 
.row { 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
} 
 

 
.box { 
 
    flex: 1; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
    background-color: white; 
 
    box-sizing: border-box; 
 
    cursor: default; 
 
} 
 

 
.rotate-right { 
 
    transition: all 400ms ease; 
 
} 
 

 
.rotate-left { 
 
    transition: all 400ms ease; 
 
} 
 

 
.rotate-right:hover { 
 
    transform: rotate(5deg); 
 
} 
 

 
.rotate-left:hover { 
 
    transform: rotate(-5deg); 
 
}

<div class="top" id="top"> 
 
    <div> 
 
    <div class="flex row banner"> 
 
     <div class="box rotate-right"> 
 
     <p> 
 
      1 
 
     </p> 
 
     </div> 
 

 
     <div class="box rotate-left"> 
 
     <p> 
 
      2 
 
     </p> 
 
     </div> 
 

 
     <div class="box rotate-right"> 
 
     <p> 
 
      3 
 
     </p> 
 
     </div> 
 

 
     <div class="box rotate-left"> 
 
     <p> 
 
      4 
 
     </p> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

Answer 1

Ajouter overflow-x: hidden pour votre body. Démo:

body { 
 
    overflow-x: hidden; 
 
} 
 

 
* { 
 
    font-size: 6vw; 
 
} 
 

 
.flex { 
 
    display: flex; 
 
} 
 

 
.row { 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
} 
 

 
.box { 
 
    flex: 1; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
    background-color: white; 
 
    box-sizing: border-box; 
 
    cursor: default; 
 
} 
 

 
.rotate-right { 
 
    transition: all 400ms ease; 
 
} 
 

 
.rotate-left { 
 
    transition: all 400ms ease; 
 
} 
 

 
.rotate-right:hover { 
 
    transform: rotate(5deg); 
 
} 
 

 
.rotate-left:hover { 
 
    transform: rotate(-5deg); 
 
}

<div class="top" id="top"> 
 
    <div> 
 
    <div class="flex row banner"> 
 
     <div class="box rotate-right"> 
 
     <p> 
 
      1 
 
     </p> 
 
     </div> 
 

 
     <div class="box rotate-left"> 
 
     <p> 
 
      2 
 
     </p> 
 
     </div> 
 

 
     <div class="box rotate-right"> 
 
     <p> 
 
      3 
 
     </p> 
 
     </div> 
 

 
     <div class="box rotate-left"> 
 
     <p> 
 
      4 
 
     </p> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>