Это потому, что вы увеличиваете их, чтобы быть ближе к пользователю вдоль оси Z. Убедитесь, что все читаемое остается в z = 0, переместив весь куб обратно на z на половину ширины куба с помощью преобразования.
В вашем случае измените правила #cube:
#wrapper.red #cube {
-webkit-transform: translateZ(-210px) rotateY(90deg);
}
вот так. Чтобы компенсировать это, вам нужно сделать куб шире и сделать текст больше, чем размер 11, чтобы он работал хорошо.