Преобразование webkit - почему мой анимированный куб показывает текст на скрытых сторонах и имеет промежутки между сторонами?

Question

Я пытаюсь сделать 3d-переход / трансформацию, чтобы при щелчке по ссылке запускалась длина моего веб-сайта, чтобы показать различные варианты. Однако в настоящее время он выглядит очень неопрятно, так как каждая грань куба имеет зазоры вокруг него, и вы можете видеть каждую грань куба, независимо от того, виден ли он (то есть, когда он анимируется, вы можете видеть текст, который вы должны иметь). видите, это также создает впечатление, что полоса увеличивается при ширине анимации.

Могу ли я привести это в порядок?

Я сделал скрипку, которую можно найти здесь

Answer 1

Я не уверен насчет пробелов, но применение -webkit-backface-visibility: hidden к .face должно решить видимую проблему с текстом.

В конце этого сообщения в блоге есть хороший пример куба, который может помочь с пробелами - может быть, вам нужно использовать translateX, чтобы получить грани в правильном положении?