1

Как трансформировать block, не трансформируя текст. То есть на текст не должная повлиять трансформация.

.transform_items {
  width: 40%;
  height: 80px;
  position: relative;
  margin: 0 auto;
  perspective: 600px;
}
.block {
  display: block;
  position: absolute;
  margin: 0 auto;
  width: 250px;
  height: 60px;
  border: 5px solid green;
  transform: rotateY(30deg);
}
.block a {
  font-size: 40px;
}
<ul class="transform_items">
  <li class="block"><a>Пункт1</a>
  </li>
  <li class="block"><a>Пункт2</a>
  </li>
  <li class="block"><a>Пункт3</a>
  </li>
</ul>

8
  • поверните a в обратную сторону на -30 18 авг 2016 в 13:48
  • 1
    @АлексейШиманский, не поможет
    – VenZell
    18 авг 2016 в 13:50
  • @VenZell, действительно не поможет
    – Grundy
    18 авг 2016 в 13:52
  • 1
    @VenZell значит переходим на псвевдоэлементы) О. смотрю и ответ появился...значит я зря начал писать 18 авг 2016 в 13:55
  • @АлексейШиманский, одинаковые мысли посетили) Я чуть раньше ответил, чем вы написали комментарий.
    – VenZell
    18 авг 2016 в 14:04

1 ответ 1

0

Можно вращать псевдоэлемент ::before, расположенный под текстом, а не сам блок.

.transform_items {
  width: 40%;
  height: 80px;
  position: relative;
  margin: 0 auto;
  perspective: 600px;
}
.block,
.block::before {
  display: block;
  position: absolute;
  margin: 0 auto;
}
.block {
  width: 250px;
  height: 60px;
}
.block::before {
  content: '';
  border: 5px solid green;
  transform: rotateY(30deg);
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
}
.block a {
  font-size: 40px;
}
<ul class="transform_items">
  <li class="block"><a>Пункт1</a>
  </li>
  <li class="block"><a>Пункт2</a>
  </li>
  <li class="block"><a>Пункт3</a>
  </li>
</ul>

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.