Question

我有一个菱形div，通过使用CSS动画在悬停时围绕自己的轴旋转360度。

我不能解决如何在不再悬停时确保顺利回到原始状态？

到目前为止，＆＃34;跳跃＆＃34;当钻石处于转弯中间时。我希望它顺利。是否可以使用CSS动画做到这一点？如果没有，也许用JS？

＆＃13;

.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); }
}

＆＃13;

<div class="dn-diamond">

＆＃13;

这是JSFiddle

我试图使用过渡，但无法保持它的原始变形形状（它又回到了正方形，而不是钻石）。

Answer 1

您应该使用transitions。当鼠标移出元素时，它们将允许您保持过渡平滑。

示例：

＆＃13;

.dn-diamond {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #000;
  transform: rotateY(0deg) rotateZ(-45deg);
  transition: transform 3s linear;
  margin: 50px;
  overflow: hidden;
}
.dn-diamond:hover {
  transform: rotateY(360deg) rotateZ(-45deg);
}

＆＃13;

<div class="dn-diamond">

＆＃13;

通过在正常和悬停状态下设置过渡属性，当光标移出元素时，您也可以控制过渡速度。

示例：

＆＃13;

.dn-diamond {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #000;
  transform: rotateY(0deg) rotateZ(-45deg);
  transition: transform 0.5s linear;
  margin: 50px;
  overflow: hidden;
}
.dn-diamond:hover {
  transform: rotateY(360deg) rotateZ(-45deg);
  transition: transform 3s linear;
}

＆＃13;

<div class="dn-diamond">

＆＃13;

请注意，在上述演示中，不包含供应商前缀。根据您要支持的浏览器，检查canIuse以了解您需要哪些供应商前缀。

Answer 2

为transitions提供transform：

  -webkit-transition: -webkit-transform 3s ease-in;
     -moz-transition: -moz-transform 3s ease-in;
       -o-transition: -o-transform 3s ease-in;
          transition: transform 3s ease-in;

<强>段：

.dn-diamond {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #000;
  transform: rotateY(0deg) rotateZ(-45deg);
  transition: transform 0.5s linear;
  margin: 50px;
  overflow: hidden;
}
.dn-diamond:hover {
  transform: rotateY(360deg) rotateZ(-45deg);
  -webkit-transition: -webkit-transform 3s ease-in;
  -moz-transition: -moz-transform 3s ease-in;
  -o-transition: -o-transform 3s ease-in;
  transition: transform 3s ease-in;
}

<div class="dn-diamond">

平滑的鼠标移动动画

2 个答案: