This week I created a new Codepen to explore a few concepts I have learned recently. The first was to make a cube shape with html and css. The second was repeating the cube inside a flex container. The third was animating the cube with jquery.
I started by making a containing div. Inside that is a single cube that consists of six divs inside a containing cube div. I gave a class of ‘side’ to each side of the cube and a class of ‘cube’ to the cube container. I added styles to the sides to make them all square shapes then gave them a background color and white stroke.
As you can see, I now have a horizontal column of squares. Next, some perspective styles need to be added to the cube container. These styles won’t visually change the cube but will help preserve a 3 dimensional look to the cube later on. The styles applied to the cube container are:
- Transform-style: preserve-3d – This, while applied to the parent element, ensures that all children of the cube container (sides), will maintain their transformations independent of any transformations applied to the cube container.
- Perspective: pixel value – The perspective property gives an effect of space by affecting the distance between the user and the Z plane. A larger value will produce a more subtle effect, a smaller value will produce a greater perspective look.
After these initial styles I added a transform to the cube so that it would begin to look like it was sitting in space. I added a rotateX and rotateY transform to the cube container. I also commented out all sides of the cube except for the front side, which I made red.
You can see that the only visible differences have been to transform the whole cube and the color of the front face. Now I began adding the other sides of the cube. This step will take some trial and error for the degree transformations to get the sides to touch correctly.
You can now see that all sides have been added except for the front side (the original red side). I commented the front side out so that you could look into the cube to see the sides intersecting. I also decreased the opacity of the sides to show the cube’s structure. For the next step in this experiment I wanted to duplicate the cube six times in a horizontal row. I also wanted the cube to face towards the viewer. I removed the transform to the cube container and added 5 other cubes to the html.
To get the cubes to line up in a horizontal row, without using any extra divs or floating, I used flex box. I set a display: flex; to the container element housing all of the cubes, not the cube container. I wanted all of my cubes to be centered horizontally so I added a justify-content: center; to the large containing div. Apart from that I wanted the design to scale down to mobile so I inserted a breakpoint right before the cubes started touch each other.
Inside the media query I set a flex-wrap: wrap; style to the whole container because flex items will try and take up the whole horizontal area you specify for them. I needed my cubes to wrap once the breakpoint was hit. Once the viewport is scaled such that the cubes no longer can fit in horizontal rows, the design will wrap them to accommodate.
In my jquery I call the function for a random color inside of a mouseover function. I target an individual cube’s side so that each cube can have a different colored background.
Once that happened I duplicated the random functions but this time with transforms, so that a mouseover event on a cube will change it’s color as well as have it rotate in a random direction.