<style type="text/css">
     .demo-box{width: 1200px;height: 600px;margin: 300px auto;}
    .demo{width: 80px;height: 200px;border: 1px solid #333;position: relative;margin-right: 300px;float: left;}
    .demo::before{content: "";width: 30px;height: 30px;border-radius: 30px;background: #007AFF;position: absolute;bottom: 0;left: 20px;}
    .alternate{animation: rotate 1.5s infinite alternate; transform-origin: center 0;}
    .rotate{animation: rotate 1.5s infinite; transform-origin: center 0;}
    .no-origin{animation: rotate 1.5s infinite;}
    @keyframes rotate{
    	100%{transform: rotate(-360deg);}
    }
</style>
<div class="demo-box">
       	<div class="demo alternate"></div>
       	<div class="demo rotate"></div>
       	<div class="demo no-origin"></div>
</div>