基本的なHTML・CSS

基本的なHTMLとCSSは以下のようなものを使用し、CSSで各li要素をposition: absoluteを使って先ほどのイメージのようになるようにそれぞれ指定していきます。
<i class="fa fa-xxx"></i>やpのHTMLやCSSに関しては今回のサンプルの見栄えを作るために使用しているアイコンやテキスト部分のものなので、必要ない場合は削除して問題ないです。

HTML

<ul>
	<li>
		<i class="fa fa-twitter"></i>
		<p>Twitter</p>
	</li>
	<li>
		<i class="fa fa-facebook"></i>
		<p>Facebook</p>
	</li>
	<li>
		<i class="fa fa-google-plus"></i>
		<p>Google+</p>
	</li>
	<li>
		<i class="fa fa-pinterest-p"></i>
		<p>Pinterest</p>
	</li>
	<li>
		<i class="fa fa-instagram"></i>
		<p>Instagram</p>
	</li>
</ul>

CSS

ul {
	position: relative;
	list-style: none;
	width: 300px;
	height: 300px;
	margin: 0 auto;
	padding: 0;
}
ul li {
	position: absolute;
	width: 100px;
	height: 100px;
	margin: 0;
	padding: 30px 0 0;
	border-radius: 50%;
	color: #fff;
	text-align: center;
	box-sizing: border-box;
}
ul li .fa {
	font-size: 26px;
}
ul li p {
	margin: 5px 0 0;
	font: 400 13px/1 'Lato', sans-serif;
}
ul li:nth-child(1) {
	top: 0;
	left: 100px;
	background-color: #55acee;
}
ul li:nth-child(2) {
	top: 70px;
	left: 5px;
	background-color: #3b5998;
}
ul li:nth-child(3) {
	top: 70px;
	right: 5px;
	background-color: #dc4e41;
}
ul li:nth-child(4) {
	bottom: 20px;
	left: 40px;
	background-color: #bd081c;
}
ul li:nth-child(5) {
	bottom: 20px;
	right: 40px;
	background-color: #125688;
}

とりあえず回転させてみる

CSSを使って要素を回転させたい時にはtransform: rotate()を使用し、更に今回実装したいものは常に時計回りで回転するものにしたいので、以下のようにtransform: rotate()をanimationと組み合わせる形で使用することで、常に時計回りに要素が回転している動きを実装できます。
先ほど記述した基本的なCSSに追記する形で以下を記述します。

CSS

ul {
	animation: rotate 30s linear infinite;
}
@keyframes rotate {
	100% { transform: rotate(360deg); }
}

上記を記述することで以下デモのように要素が常に回転している動きになるのを確認できます。
ただ、ご覧の通りたしかに要素が回転している動きを実装できたのですが、これだけだと中に表示されているアイコンやテキストの表示も回転されており、それぞれ位置によって下向きになったり横向きになったりしてしまいます…。

回転させつつ、子要素の表示を維持する

先ほどの方法でとりあえず要素を回転させるという動きを実装できますが、先述したように単純に親要素にtransform: rotate()とanimationを記述するだけでは中にある子要素の表示も一緒に回転してしまいます…。
デザイン的にそれでも問題なければいいですが、できれば中に表示されているアイコンやテキストの表示は回転させたくないという時は、基本的なCSSに追記する形で以下を記述します。

CSS

ul {
	animation: rotate 30s linear infinite;
}
@keyframes rotate {
	100% { transform: rotate(360deg); }
}
ul li {
	animation: rotate-elm 30s linear infinite;
}
@keyframes rotate-elm {
	100% { transform: rotate(-360deg); }
}

まずは先ほどと同様で、親要素（今回のサンプルの場合はul）にtransform: rotate(360deg)のanimationを記述し、要素全体が時計回りに回転する動きを実装します。
次に子要素（今回のサンプルの場合はli）に対してもtransform: rotate()とanimationを記述し、その際animationはanimation-name以外（ animation-durationやanimation-timing-function）を親要素と同じように記述していきます。
あとは、子要素で使用する@keyframes部分に親要素とは逆の動きになるようにtransform: rotate(-360deg)と記述することで、以下デモのように子要素の表示を維持しつつ要素を回転させるという動きを実装することができます。