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