我有一个通过变换正方形制成的菱形 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); }
}
它做了我想做的,但它把菱形变成了正方形。
感谢您的帮助!
最佳答案
只需将 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">
关于css - 在CSS中旋转菱形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30635854/