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

#css #html5 #css3 #svg #3d

В последние несколько дней я немного занимался свойством 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
    

Ответы

Ответ 1

Это довольно просто с 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