How to transform a block without transforming text. That is, the text should not affect the transformation.

.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>

  • turn a in the opposite direction to -30 - Alexey Shimansky
  • one
    @ Alexey Shimansky, will not help - VenZell
  • @VenZell doesn't really help - Grundy
  • one
    @VenZell means switching to pseudo-elements) Oh. I look and the answer has appeared ... it means I’ve started writing in vain - Alexey Shimansky
  • @ Alexey Shimansky, the same thoughts have visited) I answered a little earlier than you wrote a comment. - VenZell

1 answer 1

You can rotate the ::before pseudo-element located under the text, and not the block itself.

 .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>