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
Post a Comment