How can using CSS or JS make a transform without touching the text?

Like now:

&:hover transform: rotate(0deg) scale(1.001) skew(-12deg) translate(0px) background: #fff text-decoration: none

enter image description here

    4 answers 4

    If without affecting the text, then with the help of pseudo-elements: before or: after

    codepen example

     &:after { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; transition: all .27s ease-in-out; transform: rotate(0deg) scale(1.001) skew(-12deg) translate(0px); background: #fff; z-index: 5; opacity: 0; }
    • well, preprocessors are still a perversion)) - Jean-Claude
    • In codepen you can see the compiled code by selecting "view compiled") - HamSter
    • Yes, I know, I generally about this her)) - Jean-Claude

    C help jquery:

     $(function() { $(".item").hover( function() { $(this).css({ transform: "rotate(0deg) scale(1.001) skew(-12deg) translate(0px)", background: "#fff" }) $(this).children('p').css({ transform: "rotate(0deg) scale(1.001) skew(12deg) translate(0px)" }) }, function() { $(this).css({ transform: "rotate(0deg) scale(1.001) skew(0deg) translate(0px)", background: "none" }) $(this).children('p').css({ transform: "rotate(0deg) scale(1.001) skew(0deg) translate(0px)" }) } ) }); 
     .parent { background-color: #fcc01f; list-style-type: none; padding-left: 50px; } .item { padding: 10px; text-align: center; display: inline-block; text-transform: uppercase; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="parent"> <li class="item"> <p>text 1</p> </li> <li class="item"> <p>text 2</p> </li> <li class="item"> <p>text 3</p> </li> </ul>

    • hmm, I looked closer, I seem to have made your version, only on css :) explain why you use jquery for hover ? - MasterAlex
    • It's just that it's easier for me, plus you don’t have to produce a bunch of classes of html code that looks cleaner. - Dmitriy Kondratiuk
    • Is it easier for you to write 20 lines in JS instead of 2 in css? But imagine that you have hundreds of JS lines in your project, and you also hang up the function for each hover :) - MasterAlex
    • I did not say that I exclusively use JS. In this particular case, it was easier for me to do it on JS. Although if you think you can do without it. - Dmitriy Kondratiuk
    • Added another answer. And by the way, you also have a lot of css code lines)) - Dmitriy Kondratiuk

    You can do this by adding a reverse skew to the text so that it is even. Added a little jquery, but only so that you can click on the menu items in the example.

     $(document).ready(function() { $('.nav-list').on('click', '.nav-item', function() { $('.nav-item').removeClass('active'); $(this).addClass('active'); }); }); 
     body { background: #232423; } .nav-list { list-style-type: none; padding: 0; margin: 0; text-align: center; background: #fcc01f; } .nav-list .nav-item { display: inline-block; vertical-align: middle; position: relative; margin-left: -5px; } .nav-list .nav-item.active { transform: rotate(0deg) scale(1.001) skew(-12deg) translate(0px); background: #fff; } .nav-list .nav-item .nav-link { text-transform: uppercase; color: #111; text-decoration: none; display: block; padding: 1.2rem; font-family: sans-serif; font-weight: bold; position: relative; z-index: 10; } .nav-list .nav-item.active .nav-link { transform: skew(12deg); } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="nav-list"> <li class="nav-item active"><a href="#" class="nav-link">главная</a> </li> <li class="nav-item"><a href="#" class="nav-link">о нас</a> </li> <li class="nav-item"><a href="#" class="nav-link">цены</a> </li> </ul> 

       .parent { background-color: #fcc01f; list-style-type: none; padding-left: 50px; } .item { padding: 10px; text-align: center; display: inline-block; text-transform: uppercase; transform: rotate(0deg) scale(1.001) skew(-12deg) translate(0px); cursor: pointer; } .item:hover { background-color: #fff; } .item p{ transform: rotate(0deg) scale(1.001) skew(12deg) translate(0px); } 
       <ul class="parent"> <li class="item"> <p>text 1</p> </li> <li class="item"> <p>text 2</p> </li> <li class="item"> <p>text 3</p> </li> </ul>