Вращение текста вокруг оси Y

В последние несколько дней я немного занимался свойством CSS transform, и я хочу найти способ для отображения переспективы, похожее на это:

С Boxes - все обычные прямоугольные Boxes. Я просто не знаю с чего начать.
Мой код:
body { margin: 0px; margin-left: 15%; overflow: hidden; } .skewed { margin: -1px; height: 300px; border: 4px solid black; width: 70%; float: left; overflow: hidden; transform: perspective(200px) rotateY(45deg); } .skewed > img { filter: url("data:image/svg+xml;utf8,#grayscale") blur(3px); filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%) blur(3px); /* Chrome 19+ & Safari 6+ */ transition: 0.2s ease-in-out; } .skewed:hover > img { transform: scale(1.05); filter: none; -webkit-filter: grayscale(0%); }

Источник: Rotate text on th Y axis

Ответ

Это довольно просто с CSS 3D-transforms. Вы можете вращать каждый элемент по оси Y с помощью Transform:rotateY(xdeg);
Здесь пример:
div { font-size: 2em; width: 7em; margin: 0 auto; padding: 0.1em 0; text-align: center; transform: perspective(500px) rotateY(30deg); background: teal; } div:nth-child(2n) { transform: perspective(500px) rotateY(-30deg); background: tomato; }

some text

some text

some text

some text

Обратите внимание, что вам нужно будет добавить префиксы для поддержки браузера. Смотрите canIuse для получения дополнительной информации
Ответил: web-tiki