body { width: 100%; height: 100%; padding-bottom: 150px; font-family: 'Dancing Script', cursive; background-image: linear-gradient(45deg, #F7CAC9 15%, #91A8D0 85%); } .h1 { margin: 2em; color: rgba(white, .85); } .wrap { display: flex; justify-content: center; align-items: center; + .wrap { margin-top: 60px; } } .inner { display: block; transform-style: preserve-3d; perspective: 800px; } .item { width: 200px; height: 200px; color #fafafa; font-weight: bold; font-size: 30px; box-shadow: inset 0 0 0 10px rgba(black, .5), inset 0 0 0 25px rgba(black, .5), inset 0 0 0 50px rgba(black, .5); transform-origin: center center 0px; animation: spin infinite 8s cubic-bezier(0.445,0.050,0.550,0.950); // &.item2 { box-shadow: 0 0 0 10px rgba(black, .5), 0 0 0 25px rgba(black, .5), 0 0 0 50px rgba(black, .5); } } @keyframes spin { 0%, 20% { transform: rotateY(0); } 80%, 100% { transform: rotateY(360deg); } }
<h1 class="h1 font-weight-bold text-xs-center text-capitalize">mulch border</h1> <div class="wrap"> <div class="inner"> <div class="item"></div> </div> <div class="inner"> <div class="item"></div> </div> </div> <div class="wrap"> <div class="inner"> <div class="item item2"></div> </div> <div class="inner"> <div class="item item2"></div> </div> </div>