"Animation Rotate & Unrotate"
Bootstrap 4.1.1 Snippet by trinhquan

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="circle-wrapper"> <ul class="circle-container rotate"> <li><img class="unrotate" src="https://wisepops.com/wp-content/uploads/2019/08/icon-shopify.svg" alt="Shopify" data-was-processed="true"></li> <li><img class="unrotate" src="https://wisepops.com/wp-content/uploads/2019/08/icon-magento.svg" alt="Magento" data-was-processed="true"></li> <li><img class="unrotate" src="https://wisepops.com/wp-content/uploads/2019/08/icon-mailchimp.svg" alt="Mailchimp" data-was-processed="true"></li> <li><img class="unrotate" src="https://wisepops.com/wp-content/uploads/2019/08/icon-klaviyo.svg" alt="Klavio" data-was-processed="true"></li> <li><img class="unrotate" src="https://wisepops.com/wp-content/uploads/2019/08/icon-wordpress.svg" alt="WordPress" data-was-processed="true"></li> <li><img class="unrotate" src="https://wisepops.com/wp-content/uploads/2019/08/icon-zapier.svg" alt="Zapier" data-was-processed="true"></li> <li><img class="unrotate" src="https://wisepops.com/wp-content/uploads/2019/08/icon-gtm.svg" alt="Google" data-was-processed="true"></li> <li><img class="unrotate" src="https://wisepops.com/wp-content/uploads/2019/08/icon-hubspot.svg" alt="Hubspot" data-was-processed="true"></li> </ul> <img src="https://wisepops.com/wp-content/uploads/2019/08/icon-wisepops.svg" alt=""> </div> <div class="col-12 copy-right text-center">© Saturday, October 3, 2020 quanth</dv> </div> </div>
.circle-wrapper { background-image: url(https://wisepops.com/wp-content/themes/wisepops/assets/dist/svg/m-bg-circle.svg); background-position: center center; background-repeat: no-repeat; background-size: contain; position: relative; margin: 51px auto; display: block; } .circle-wrapper>img { top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); position: absolute; margin: 0; } .circle-wrapper img { display: block; border-radius: 100%; background-color: #fff; -webkit-box-shadow: 0 8px 16px 0 rgba(31,45,61,.16); box-shadow: 0 8px 16px 0 rgba(31,45,61,.16); image-rendering: crisp-edges; } .circle-container { position: relative; width: 25em; height: 25em; padding: 0; border-radius: 50%; list-style: none; margin: 0 auto; } .circle-container>* { display: block; position: absolute; top: 50%; left: 50%; width: 6em; height: 6em; margin: -3em; } .circle-container>:nth-of-type(1) { -webkit-transform: rotate(0) translate(12.5em) rotate(0); transform: rotate(0) translate(12.5em) rotate(0); } .circle-container>:nth-of-type(2) { -webkit-transform: rotate(45deg) translate(12.5em) rotate(-45deg); transform: rotate(45deg) translate(12.5em) rotate(-45deg); } .circle-container>:nth-of-type(3) { -webkit-transform: rotate(90deg) translate(12.5em) rotate(-90deg); transform: rotate(90deg) translate(12.5em) rotate(-90deg); } .circle-container>:nth-of-type(4) { -webkit-transform: rotate(135deg) translate(12.5em) rotate(-135deg); transform: rotate(135deg) translate(12.5em) rotate(-135deg); } .circle-container>:nth-of-type(5) { -webkit-transform: rotate(180deg) translate(12.5em) rotate(-180deg); transform: rotate(180deg) translate(12.5em) rotate(-180deg); } .circle-container>:nth-of-type(6) { -webkit-transform: rotate(225deg) translate(12.5em) rotate(-225deg); transform: rotate(225deg) translate(12.5em) rotate(-225deg); } .circle-container>:nth-of-type(7) { -webkit-transform: rotate(270deg) translate(12.5em) rotate(-270deg); transform: rotate(270deg) translate(12.5em) rotate(-270deg); } .circle-container>:nth-of-type(8) { -webkit-transform: rotate(315deg) translate(12.5em) rotate(-315deg); transform: rotate(315deg) translate(12.5em) rotate(-315deg); } .rotate, .unrotate { -webkit-animation: rotate 120s linear infinite; animation: rotate 120s linear infinite; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .pulse, .unrotate { -webkit-animation: unrotate 120s linear infinite; animation: unrotate 120s linear infinite; } @-webkit-keyframes rotate { 0% { -webkit-transform:rotate(.02deg) translate3d(0,0,0); transform:rotate(.02deg) translate3d(0,0,0) } to { -webkit-transform:rotate(360deg) translate3d(0,0,0); transform:rotate(360deg) translate3d(0,0,0) } } @keyframes rotate { 0% { -webkit-transform:rotate(.02deg) translate3d(0,0,0); transform:rotate(.02deg) translate3d(0,0,0) } to { -webkit-transform:rotate(360deg) translate3d(0,0,0); transform:rotate(360deg) translate3d(0,0,0) } } @-webkit-keyframes unrotate { 0% { -webkit-transform:rotate(.02deg) translate3d(0,0,0); transform:rotate(.02deg) translate3d(0,0,0) } to { -webkit-transform:rotate(-360deg) translate3d(0,0,0); transform:rotate(-360deg) translate3d(0,0,0) } } @keyframes unrotate { 0% { -webkit-transform:rotate(.02deg) translate3d(0,0,0); transform:rotate(.02deg) translate3d(0,0,0) } to { -webkit-transform:rotate(-360deg) translate3d(0,0,0); transform:rotate(-360deg) translate3d(0,0,0) } } .copy-right { display: block; margin-top: 51px; }

Related: See More


Questions / Comments: