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

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

在css中旋转钻石形状

2 个答案: