CSS: Transform rotate on hover only the list container, not the child or contents

I am having great difficulty figuring out how to keep the element inside a list container static while the list container itself rotates on hover only using html and CSS.

Essentially, I have a diamond box around a font-icon, and when I hover the entire list container rotates by 45 degrees and makes a square, but this also rotates my icon inside by 45 degrees. I know how to separate the transformations when there is no hover rotation going on, but adding a hover action seems to override everything I try.

Here is the html in question:

<div class="nav">
    <ul class="social">
        <li class="socialitem"><i class="fab fa-github" style="font-size: 30px; color: #c9d1d9;"></i></li>
        <li class="socialitem">ok</li>
    </ul>
</div>

And here is the relevant CSS:


.socialitem {
  border-style: solid;
  border-width: 2px;
  display: inline-flex;
  width: 90px;
  height: 90px;
  margin: auto 35px;
  background-color: #0000ff00;
  transform: rotate(45deg);
  transform-style: preserve-3d;
  position: relative;
  transition: transform 0.25s;
  align-items: center;
  justify-content: center;
}

.socialitem:hover {
  background-color: #ffcccc00;
  width: 90px;
  height: 90px;
  transform: rotate(0deg);
}

.socialitem:hover .fab {
  transform: none;
  transition: transform 0s;
}

.fab {
  transform: rotate(-45deg);
  transition: transform 0s;
}

.social {
  text-align: center;
}

The social media icon links at the following github page template web page has the behavior I am trying to imitate:

http://website-templates.github.io/jekyll-inclusion/

2 answers

  • answered 2021-01-11 05:34 Pushkin

    Just add the contents inside a span and make them counteract the parent's transform

    .socialitem > span {
      transform: rotate(-45deg);
       transition: transform 0.25s;
    }
    
    .socialitem:hover > span {
      transform: rotate(0deg);
    }
    

    .socialitem {
      border-style: solid;
      border-width: 2px;
      display: inline-flex;
      width: 90px;
      height: 90px;
      margin: auto 35px;
      background-color: #0000ff00;
      transform: rotate(45deg);
      transform-style: preserve-3d;
      position: relative;
      transition: transform 0.25s;
      align-items: center;
      justify-content: center;
    }
    
    .socialitem:hover {
      background-color: #ffcccc00;
      width: 90px;
      height: 90px;
      transform: rotate(0deg);
    }
    
    .socialitem > span {
      transform: rotate(-45deg);
       transition: transform 0.25s;
    }
    
    .socialitem:hover > span {
      transform: rotate(0deg);
    }
    
    .socialitem:hover .fab {
      transform: none;
      transition: transform 0s;
    }
    
    .fab {
      transform: rotate(-45deg);
      transition: transform 0s;
    }
    
    .social {
      text-align: center;
    }
    <div class="nav">
        <ul class="social">
            <li class="socialitem"><i class="fab fa-github" style="font-size: 30px; color: #c9d1d9;"></i></li>
            <li class="socialitem">
              <span>ok</span>
            </li>
        </ul>
    </div>

  • answered 2021-01-11 07:10 Burham B. Soliman

    u could use pseudo ::after to achieve your goal without getting the child affected

    .socialitem {
      position: relative;
      margin: auto 35px;
      background-color: #0000ff00;
      display:inline-flex;
      align-items: center;
      justify-content: center;
    }
    .socialitem::after {
      content: "";
      border-style: solid;
      border-width: 2px;
      width: 50px;
      height: 50px;
      transform: rotate(45deg);
      transform-style: preserve-3d;
      transition: transform 0.25s;
    
    }
    .socialitem:hover::after {
      transform: rotate(0deg);
    }
    .socialitem * {
    position:absolute;
    text-align:center;
    }
    .social {
    text-align: center;
    }
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <div class="nav">
      <ul class="social">
        <li class="socialitem"><i class="fab fa-github" style="font-size: 30px; color: #c9d1d9;"></i></li>
        <li class="socialitem">
          <span>ok</span>
        </li>
      </ul>
    </div>