body { margin: 20px; color: #fff; font-family: Helvetica, Arial, sans-serif; } .original, .box { border-radius: 6px; } .original { float: left; border: 1px dashed #333; background: #ddd; margin: 20px; } .box { width: 95px; height: 95px; line-height: 95px; text-align: center; background: springgreen; } .box-1 { transform: rotate(20deg); } .box-2 { transform: rotate(-50deg); } /* animation */ .spin { transform-style: preserve-3d; pointer: cursor; } .spin:hover { animation: spin 5s linear infinite; } @keyframes spin { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } }
<div class="original"> <div class="spin"> <div class="box box-1">rotate(20deg)</div> </div> </div> <div class="original"> <div class="spin"> <div class="box box-2">rotate(-50deg)</div> </div> </div>