Now that we've addressed the browser compatibility issues, we can safely remove the experimental comments and classes we previously attached to the images.
To create a sense of randomness, we can define a few groups of classes, each group having more variants of the same property, and then we can pick one class for each group of each image we want to display. Here's an example; let's add the following to application.css:
/* sizes */
.size-a{
width: 30%;
}
.size-b{
width: 35%;
}
.size-c{
width: 50%;
}
/* z-indexes */
.depth-a{
transform: translateZ(10px);
z-index: 1;
}
.depth-b{
transform: translateZ(50px);
z-index: 2;
}
.depth-c{
transform: translateZ(100px);
z-index: 3;
}
.depth-d{
transform: translateZ(150px);
z-index: 4;
}
.depth-e{
transform: translateZ(200px);
z-index: 5;
}Now we can substitute the images used in the previous section with this list, where each image has a depth-* and one size...