在CSS中旋转钻石形状

Question

我有一个通过变换正方形制成的菱形div。

.dn-diamond {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: #000;
  /* Rotate */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  margin: 100px;
  overflow: hidden;
}

有什么办法可以使其绕自身轴旋转吗？ 我正在尝试这样做：

.dn-diamond:hover {
    animation: spin 3s infinite linear;
}
@keyframes spin {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}

它完成了我想做的事情，但是将菱形更改为正方形。

谢谢你的帮助！

Answer 1

只需将spin rotate(-45deg)添加到旋转动画中：

 .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"> 

Answer 2

因为您在两者中都使用了transform ，所以这将失败。 解决此问题的最简单方法是将钻石包裹在div中，并使该div旋转。

<div class='wrapper'>
  <div class='dn-diamond'></div>
</div>

然后在CSS中：

.wrapper:hover {
  width: 200px;
  height: 200px;
  animation: spin 3s infinite linear;
}