Spinning a diamond shape in css -


i have diamond-shaped div made transforming 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 way spin around own axis? trying this:

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

it want do, changes diamond square.

thanks help!

just add rotate(-45deg) 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 {    {       transform: rotatey(0deg) rotate(-45deg);     }    {      transform: rotatey(360deg) rotate(-45deg);     }  }
<div class="dn-diamond">


Comments

Popular posts from this blog

Magento/PHP - Get phones on all members in a customer group -

php - .htaccess mod_rewrite for dynamic url which has domain names -

Website Login Issue developed in magento -