<div></div>
/* mod query, list length is divisible by 3 */
li:nth-last-child(3n):first-child,
li:nth-last-child(3n):first-child ~ li {
  filter: none;
  opacity: 1;
}

/* mod query, list length is divisible by 3 remainder 1 */
li:nth-last-child(3n+1):first-child,
li:nth-last-child(3n+1):first-child ~ li {
 // transform: rotate(-90deg);
}


/* mod query, list length is divisible by 3 remainder 2 */
li:nth-last-child(3n+2):first-child,
li:nth-last-child(3n+2):first-child ~ li {
  transform: rotate(-180deg);
}



ul {
  list-style: none;
  margin: 20px;
  padding: 0;
}


/* list item layout */

li {
  border-radius: 8px;
  display: inline-block;
  height: 60px;
  filter: grayscale(1);
  margin: 0 5px 0 0;
  min-width: 60px;
  opacity: .5;
  padding: 0;
}


/* list item background */

li {
  filter: gray;
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  background-image: url("data:image/jpeg;base64,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");
}
[6, 7, 8, 9].forEach(function(ii) {
  var $ul = $("<ul/>").appendTo("div");
  for (var i = 0; i < ii; i++) {
    $ul.append("<li/>")
  };
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js