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

376
20 февраля 2017, 18:10

В последние несколько дней я немного занимался свойством 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,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#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%); 
}
<div class="skewed"> 
  <img src="image001.jpg"> 
</div> 
<div class="skewed"> 
  <img src="image002.jpg"> 
</div> 
<div class="skewed"> 
  <img src="image003.jpg"> 
</div> 
<div class="skewed"> 
  <img src="image004.jpg"> 
</div>

комментарии:

Пожалуйста, укажите, что вы пытались ... как минимум HTML и базовые CSS для этих boxes. – @DaniP

Эти boxes поставляются вместе с GIMP, я попробовал в значительной степени все свойства преобразования, но меня не привело это к желаемому результату, даже комбинации, так что, как говорится, я понятия не имею, с чего начать. @Tesserakt

Начните с базового HTML и CSS, чтобы сделать эти boxes @DaniP

Простите, кажется, вы не понимаете моей проблемы. Я просто хочу знать, какое свойство преобразования я должен использовать @Tesserakt

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

Answer 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; 
}
<div>some text</div> 
<div>some text</div> 
<div>some text</div> 
<div>some text</div>

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

Ответил: web-tiki

READ ALSO
Как с радио кнопками сделать таб
CSS

Как с радио кнопками сделать таб

Есть две радио кнопки, надо сделать из них таб

 432
Проблема с компиляторами [требует правки]
c++

Проблема с компиляторами [требует правки]

Имеется VS 2015,в которой написан кодЭтот код в GNU C++ 4

 226
winAPI WM_TIMER WM_PAINT как сделать светофор?
c++

winAPI WM_TIMER WM_PAINT как сделать светофор?

Начинаю знакомство с WinAPI нужно сделать что-то типа светофора(три серых квадрата и по очередности один из них должен менять цвет) незнаю какое...

 460
C++ добавление модуля к работающей части
c++

C++ добавление модуля к работающей части

Доброго времени суток!

 265