responsible cubes

[abonne-toiture]

Hey guys.

I made some cubes in Css but they are not responsive. I tried several things but I'm not good enough to do it.

I would need some help.

Many thanks.

<div class="scene">
  <div class="divcube">
    <div class="cube">
      <div class="cube__face cube__face--front" style="background: url(file:///Users/xxxx/Downloads/test2.png); background-size: contain;"></div>
      
      <div class="cube__face cube__face--right cube__face_R" style="background: url(file:///Users/xxxx/Downloads/test2.png); background-size: contain;"></div>
      
      <div class="cube__face cube__face--top cube__face_T" style="background: url(file:///Users/xxxx/Downloads/test2.png); background-size: contain;"></div>
        
    </div>
  </div>

<div class="divcube">
    <div class="cube">
      <div class="cube__face cube__face--front" style="background: hsla(  0, 100%, 50%, 0.7);"></div>
      
      <div class="cube__face cube__face--right cube__face_R" style="background: hsla( 60, 100%, 50%, 0.7);"></div>
      
      <div class="cube__face cube__face--top cube__face_T" style="background: hsla(240, 100%, 50%, 0.7);"></div>
        
    </div>
  </div>

<div class="divcube">
    <div class="cube">
      <div class="cube__face cube__face--front" style="background: hsla(  0, 100%, 50%, 0.7);"></div>
      
      <div class="cube__face cube__face--right cube__face_R" style="background: hsla( 60, 100%, 50%, 0.7);"></div>
      
      <div class="cube__face cube__face--top cube__face_T" style="background: hsla(240, 100%, 50%, 0.7);"></div>
        
    </div>
  </div>

  <div class="divcube">
    <div class="cube">
      <div class="cube__face cube__face--front" style="background: hsla(  0, 100%, 50%, 0.7);"></div>
      
      <div class="cube__face cube__face--right cube__face_R" style="background: hsla( 60, 100%, 50%, 0.7);"></div>
      
      <div class="cube__face cube__face--top cube__face_T" style="background: hsla(240, 100%, 50%, 0.7);"></div>
        
    </div>
  </div>
</div>




<style type="text/css">

  .divcube {
margin-right: 20%;
}
  * { box-sizing: border-box; }

body { font-family: sans-serif; }

.scene {
 /* width: 100%;
  height: 100%;
  border: 1px solid #CCC;
 
  perspective: 400px;*/
  display: flex;
  margin-top: 200px!important;
  margin: 80px;

}

.cube {
width: 10em;
height: 10em;
position: relative;
transform-style: preserve-3d;
/* transform: translateZ(0px); */
transition: transform 1s;
/* width: 100%; */
/* height: 100%; */
}



.cube__face {
position: absolute;

border: 2px solid black;
line-height: 200px;
}
 


.cube__face--front  { transform: rotateY(  0deg) translateZ(60px);
width: 100%;
height: 100%;
max-width: 10em;
max-height: 10em;

}

.cube__face--right {
transform: rotateY(40deg) rotateZ(-35deg) translateZ(3em) translateY(3.8em) translateX(7.8em) skew(-35deg);
max-height: 8.2em;
max-width: 7.8em;
width: 100%;
height: 100%;
}


.cube__face--top {
transform: rotateX(40deg) translateZ(4em) translateY(-3.5em) translateX(2.4em) skew(-40deg);
max-height: 6.1em;
max-width: 10em;
width: 100%;
height: 100%;
}





label { margin-right: 10px; }</style>

 

[Deleted member 6419]

If you want the cubes to 'break' to the next line when the screen gets smaller, set flex-wrap (below). I'm not sure if this alone will give you what you want, but it's a start.

.scene {
 /* width: 100%;
  height: 100%;
  border: 1px solid #CCC;
 
  perspective: 400px;*/
  display: flex;
  margin-top: 200px!important;
  margin: 80px;

  /*  try this  */
  flex-wrap: wrap;
    
}