Page 39 - CSS

.cubeFace:after {
top: 0;
left: 100%;
transform: rotateY(90deg);
}

View this example
Additional styling is added in the demo and a transform is applied on hover to view the 6 faces of
the cube.

Should be noted that:

• 4 faces are made with pseudo elements
• chained transforms are applied

backface-visibility

The backface-visibility property relates to 3D transforms.

With 3D transforms and the backface-visibility property, you're able to rotate an element such
that the original front of an element no longer faces the screen.

For example, this would flip an element away from the screen:

JSFIDDLE

<div class="flip">Loren ipsum</div>
<div class="flip back">Lorem ipsum</div>

.flip {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-webkit-backface-visibility: visible;
-moz-backface-visibility: visible;
-ms-backface-visibility: visible;
}

.flip.back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}

Firefox 10+ and IE 10+ support backface-visibility without a prefix. Opera, Chrome, Safari, iOS,
and Android all need -webkit-backface-visibility.

It has 4 values:

1. visible (default) - the element will always be visible even when not facing the screen.
2. hidden - the element is not visible when not facing the screen.
3. inherit - the property will gets its value from the its parent element

https://riptutorial.com/ 17