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

Question

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/

Answer 1

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>

Answer 2

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>