我有一个菱形的div，它通过使用CSS动画在悬停时围绕其自身的轴旋转360度。
我无法解决如何在不再悬停时如何确保平稳返回到原始状态？
到目前为止，当钻石处于转弯中间时，它会“跳跃”。我希望它能顺利进行。CSS动画可以做到吗？如果没有，也许用JS？
.dn-diamond {
display: inline-block;
width: 100px;
height: 100px;
background: #000;
transform: rotate(-45deg);
margin: 50px;
overflow: hidden;
}
.dn-diamond:hover {
animation: spin 3s infinite linear;
}
@keyframes spin {
from { transform: rotateY(0deg) rotate(-45deg); }
to { transform: rotateY(360deg) rotate(-45deg); }
}<div class="dn-diamond">这是JSFiddle
我试图使用该过渡，但无法保持其原始的变形形状（它恢复为正方形，而不是菱形）。
我有一个具有ID的主体，body并且在其中具有一个class的div nav-container。我想在用户单击时删除某些类#body，但不要删除.nav-container（这是菜单的覆盖类型）。
尝试以下代码
HTML：
<body id="body">
<div class="nav-container">
<a href="#" id="close-btn"> X </a>
<nav class="display">
<ul>
<li><a href="#"> One </a></li>
<li><a href="#"> Two </a></li>
<li><a href="#"> Three </a></li>
</ul>
</nav>
</div>
</body>
jQuery的
$('#body :not(.nav-container)').click(function() {
$('.cover').removeClass('active-cover');
$('.nav-container').removeClass('active');
});
尽管它似乎对我不起作用。
我通过以下方式标记了导航:
<nav>
<ul>
<li class="first-item"><a href="main.html"> Home </a></li>
<li class="second-item"><a href="menu.html"> Menu </a></li>
<li class="third-item"><a href="why-us.html">Why us? </a></li>
<li class="fourth-item"><a href="contact.html"> Contact </a></li>
</ul>
</nav>
它的设置方式是第三项li添加了一些样式(框阴影),因为它是指示用户当前位置的活动元素.它还使列表元素的其余部分更加透明.
在悬停在任何其他li上时,我希望第三项li没有框阴影,并且悬停的任何元素都添加了一些样式,但似乎没有使用ul li:hover .third-item.
这是CSS:
ul li:not(.third-item) {
opacity: 0.8;
}
ul li.third-item {
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
z-index: 10;
position: relative;
}
ul li:hover {
opacity: 1;
box-shadow: 0 0 4px 5px rgba(0, 0, 0, 0.2);
}
ul li:hover .third-item {
box-shadow: none;
}