<div class="original"> <div class="spin"> <figure class="box box-1">Блок 1</figure> </div> </div> <div class="original"> <div class="spin"> <figure class="box box-2">Блок 2</figure> </div> </div>
body { color: #fff; font: 600 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif; margin: 12px 15px; } figure { margin: 0; } .original, .box { border-radius: 6px; } .original { background: #eaeaed; border: 1px dashed #cecfd5; float: left; margin: 12px 15px; } .box { background: #2db34a; height: 95px; line-height: 95px; text-align: center; width: 95px; } .spin { cursor: pointer; transform-style: preserve-3d; } .spin:hover { animation: spin 5s linear infinite; } @keyframes spin { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .box-1 { transform: perspective(200px) scaleZ(1.75) rotateX(45deg); } .box-2 { transform: perspective(200px) scaleZ(.25) rotateX(45deg); }