Experimenting with CSS transforms

Vasarely in black & white

Victor Vasarely painting, 1957

Digital version of a painting created by Victor Vasarely in 1957.

The effect is created using a series of PHP for loops to create all the HTML divs. These are styled with an excessive amount of nth-child strings in CSS to target specific squares, and CSS transforms to change the shapes of them.

This is the demo of the related blog post.

css

									
										
/**
 * ------------------------------------------------------------------------------------------------- 
 * Layout
 * -------------------------------------------------------------------------------------------------
 */

.vasarelybw { width: 75%; float: left; }

.vasarelybw__box {
  float: left;
  width: 48%;
  margin: 1%; 
}

.vasarelybw__row {
  clear: both;
  display: block;
  float: left;
  width: 100%; 
}

.vasarelybw__cube {
  float: left;
  width: 7%;
  height: 0;
  padding-bottom: 7%;
  margin: 0 2% 2% 0;
  background: #222; 
}

/**
 * ------------------------------------------------------------------------------------------------- 
 * Cube 1
 * -------------------------------------------------------------------------------------------------
 */

#cube1 .vasarelybw__row:nth-child(3) .vasarelybw__cube:nth-child(6),
#cube1 .vasarelybw__row:nth-child(4) .vasarelybw__cube:nth-child(5), 
#cube1 .vasarelybw__row:nth-child(4) .vasarelybw__cube:nth-child(7),
#cube1 .vasarelybw__row:nth-child(5) .vasarelybw__cube:nth-child(4),
#cube1 .vasarelybw__row:nth-child(5) .vasarelybw__cube:nth-child(8),
#cube1 .vasarelybw__row:nth-child(6) .vasarelybw__cube:nth-child(3), 
#cube1 .vasarelybw__row:nth-child(6) .vasarelybw__cube:nth-child(9),
#cube1 .vasarelybw__row:nth-child(7) .vasarelybw__cube:nth-child(4), 
#cube1 .vasarelybw__row:nth-child(7) .vasarelybw__cube:nth-child(8),
#cube1 .vasarelybw__row:nth-child(8) .vasarelybw__cube:nth-child(5), 
#cube1 .vasarelybw__row:nth-child(8) .vasarelybw__cube:nth-child(7),
#cube1 .vasarelybw__row:nth-child(9) .vasarelybw__cube:nth-child(6) {
  -webkit-transform: skewY(-8deg);
  -ms-transform: skewY(-8deg);
  transform: skewY(-8deg); 
}

#cube1 .vasarelybw__row:nth-child(4) .vasarelybw__cube:nth-child(6),
#cube1 .vasarelybw__row:nth-child(5) .vasarelybw__cube:nth-child(5), 
#cube1 .vasarelybw__row:nth-child(5) .vasarelybw__cube:nth-child(7),
#cube1 .vasarelybw__row:nth-child(6) .vasarelybw__cube:nth-child(4), 
#cube1 .vasarelybw__row:nth-child(6) .vasarelybw__cube:nth-child(8),
#cube1 .vasarelybw__row:nth-child(7) .vasarelybw__cube:nth-child(5), 
#cube1 .vasarelybw__row:nth-child(7) .vasarelybw__cube:nth-child(7),
#cube1 .vasarelybw__row:nth-child(8) .vasarelybw__cube:nth-child(6) {
  -webkit-transform: skewY(-14deg);
  -ms-transform: skewY(-14deg);
  transform: skewY(-14deg); 
}

#cube1 .vasarelybw__row:nth-child(5) .vasarelybw__cube:nth-child(6),
#cube1 .vasarelybw__row:nth-child(6) .vasarelybw__cube:nth-child(5), 
#cube1 .vasarelybw__row:nth-child(6) .vasarelybw__cube:nth-child(7),
#cube1 .vasarelybw__row:nth-child(7) .vasarelybw__cube:nth-child(6) {
  -webkit-transform: skewY(-20deg);
  -ms-transform: skewY(-20deg);
  transform: skewY(-20deg); 
}

#cube1 .vasarelybw__row:nth-child(6) .vasarelybw__cube:nth-child(6) {
  -webkit-transform: skewY(-26deg);
  -ms-transform: skewY(-26deg);
  transform: skewY(-26deg); 
}

/**
 * ------------------------------------------------------------------------------------------------- 
 * Cube 2
 * -------------------------------------------------------------------------------------------------
 */

#cube2 .vasarelybw__row:nth-child(3) .vasarelybw__cube:not(:nth-child(-n+2)):not(:nth-last-child(-n+2)),
#cube2 .vasarelybw__row:nth-child(9) .vasarelybw__cube:not(:nth-child(-n+2)):not(:nth-last-child(-n+2)) {
  -webkit-transform: skewY(6deg);
  -ms-transform: skewY(6deg);
  transform: skewY(6deg); 
}

#cube2 .vasarelybw__row:nth-child(4) .vasarelybw__cube:not(:nth-child(-n+2)):not(:nth-last-child(-n+2)),
#cube2 .vasarelybw__row:nth-child(8) .vasarelybw__cube:not(:nth-child(-n+2)):not(:nth-last-child(-n+2)) {
  -webkit-transform: skewY(12deg);
  -ms-transform: skewY(12deg);
  transform: skewY(12deg); 
}

#cube2 .vasarelybw__row:nth-child(5) .vasarelybw__cube:not(:nth-child(-n+2)):not(:nth-last-child(-n+2)),
#cube2 .vasarelybw__row:nth-child(7) .vasarelybw__cube:not(:nth-child(-n+2)):not(:nth-last-child(-n+2)) {
  -webkit-transform: skewY(18deg);
  -ms-transform: skewY(18deg);
  transform: skewY(18deg); 
}

#cube2 .vasarelybw__row:nth-child(6) .vasarelybw__cube:not(:nth-child(-n+2)):not(:nth-last-child(-n+2)) {
  -webkit-transform: skewY(24deg);
  -ms-transform: skewY(24deg);
  transform: skewY(24deg); 
}

/**
 * ------------------------------------------------------------------------------------------------- 
 * Cube 4
 * -------------------------------------------------------------------------------------------------
 */

#cube4 .vasarelybw__row:nth-child(3) .vasarelybw__cube:not(:nth-child(-n+1)):not(:nth-last-child(-n+2)),
#cube4 .vasarelybw__row:nth-child(4) .vasarelybw__cube:nth-child(2), 
#cube4 .vasarelybw__row:nth-child(4) .vasarelybw__cube:nth-child(9),
#cube4 .vasarelybw__row:nth-child(5) .vasarelybw__cube:nth-child(2), 
#cube4 .vasarelybw__row:nth-child(5) .vasarelybw__cube:nth-child(9),
#cube4 .vasarelybw__row:nth-child(6) .vasarelybw__cube:nth-child(2), 
#cube4 .vasarelybw__row:nth-child(6) .vasarelybw__cube:nth-child(9),
#cube4 .vasarelybw__row:nth-child(7) .vasarelybw__cube:nth-child(2), 
#cube4 .vasarelybw__row:nth-child(7) .vasarelybw__cube:nth-child(9),
#cube4 .vasarelybw__row:nth-child(8) .vasarelybw__cube:nth-child(2), 
#cube4 .vasarelybw__row:nth-child(8) .vasarelybw__cube:nth-child(9),
#cube4 .vasarelybw__row:nth-child(9) .vasarelybw__cube:nth-child(2), 
#cube4 .vasarelybw__row:nth-child(9) .vasarelybw__cube:nth-child(9),
#cube4 .vasarelybw__row:nth-child(10) .vasarelybw__cube:not(:nth-child(-n+1)):not(:nth-last-child(-n+2)) {
  -webkit-transform: rotate(-6deg);
  -ms-transform: rotate(-6deg);
  transform: rotate(-6deg); 
}

#cube4 .vasarelybw__row:nth-child(4) .vasarelybw__cube:not(:nth-child(-n+2)):not(:nth-last-child(-n+3)),
#cube4 .vasarelybw__row:nth-child(5) .vasarelybw__cube:nth-child(3), 
#cube4 .vasarelybw__row:nth-child(5) .vasarelybw__cube:nth-child(8),
#cube4 .vasarelybw__row:nth-child(6) .vasarelybw__cube:nth-child(3), 
#cube4 .vasarelybw__row:nth-child(6) .vasarelybw__cube:nth-child(8),
#cube4 .vasarelybw__row:nth-child(7) .vasarelybw__cube:nth-child(3), 
#cube4 .vasarelybw__row:nth-child(7) .vasarelybw__cube:nth-child(8),
#cube4 .vasarelybw__row:nth-child(8) .vasarelybw__cube:nth-child(3), 
#cube4 .vasarelybw__row:nth-child(8) .vasarelybw__cube:nth-child(8),
#cube4 .vasarelybw__row:nth-child(9) .vasarelybw__cube:not(:nth-child(-n+2)):not(:nth-last-child(-n+3)) {
  -webkit-transform: rotate(-12deg);
  -ms-transform: rotate(-12deg);
  transform: rotate(-12deg); 
}

#cube4 .vasarelybw__row:nth-child(5) .vasarelybw__cube:not(:nth-child(-n+3)):not(:nth-last-child(-n+4)),
#cube4 .vasarelybw__row:nth-child(6) .vasarelybw__cube:nth-child(4), 
#cube4 .vasarelybw__row:nth-child(6) .vasarelybw__cube:nth-child(7),
#cube4 .vasarelybw__row:nth-child(7) .vasarelybw__cube:nth-child(4), 
#cube4 .vasarelybw__row:nth-child(7) .vasarelybw__cube:nth-child(7),
#cube4 .vasarelybw__row:nth-child(8) .vasarelybw__cube:not(:nth-child(-n+3)):not(:nth-last-child(-n+4)) {
  -webkit-transform: rotate(-18deg);
  -ms-transform: rotate(-18deg);
  transform: rotate(-18deg); 
}

#cube4 .vasarelybw__row:nth-child(6) .vasarelybw__cube:nth-child(5), 
#cube4 .vasarelybw__row:nth-child(6) .vasarelybw__cube:nth-child(6),
#cube4 .vasarelybw__row:nth-child(7) .vasarelybw__cube:nth-child(5), 
#cube4 .vasarelybw__row:nth-child(7) .vasarelybw__cube:nth-child(6) {
  -webkit-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  transform: rotate(-30deg); 
}
	    							
	    						

html

									
										
<section class="vasarelybw">
   <div id="cube1" class="vasarelybw__box">
         <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
         </div>
      <div id="cube2" class="vasarelybw__box">
         <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
         </div>
      <div id="cube3" class="vasarelybw__box">
         <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
         </div>
      <div id="cube4" class="vasarelybw__box">
         <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
            <div class="vasarelybw__row">
               <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
                  <div class="vasarelybw__cube"></div>
               </div>
         </div>
   </section>