Блог

Главная - Вопросы по программированию - Поворот текста по оси Y

Поворот текста по оси Y

#html #css #css-shapes #css-transforms

#HTML #css #css-фигуры #css-преобразования

Вопрос:

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

несколько текстовых полей, повернутых по оси Y

Все поля являются обычными прямоугольными полями. Я просто понятия не имею, с чего начать.

По запросу:

 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  amp; 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>

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

1. Пожалуйста, укажите, что вы пробовали… по крайней мере, html и базовый css для этих полей.

2. Эти поля собраны вместе с помощью GIMP, я перепробовал практически все свойства преобразования, но ни одно из них не привело меня к такому результату, даже комбинации, так что, как уже говорилось, я понятия не имею, с чего начать.

3. Начните с базового html и CSS, чтобы создать эти поля.

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

Ответ №1:

Это довольно просто с помощью 3D-преобразований CSS. Вы можете повернуть каждый элемент по оси 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 для получения дополнительной информации