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/
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…