css - 在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

只需将 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">