Spinning a diamond shape in css

Question

I have a diamond-shaped div made by transforming the square.

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

Is there any way I could spin it around its own axis? I was trying to do this:

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

It does what I want to do, but it changes the diamond to the square.

Thanks for any help!

Answer 1

Just add rotate(-45deg) to your spin animation:

 .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

Because you are using transform in both, this fails. The easiest way to solve this is to wrap the diamond in a div, and have that div spin instead.

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

Then in CSS:

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