rotateは x軸、y軸、z軸 を中心に要素を回転させる事が出来ます。

前提

今回は例として以下の html と css を使用します。

HTML

<div class="box_test rotate">中央</div>

CSS

.box_test {
  height: 100px;
  width: 100px;
  background-color: #adcd;
  text-align: center;
  line-height:100px;
}

.rotate {
  /* ここに rotate を指定します */
}

以下のような感じになります。

rotate()

要素の中央を起点に回転させる事が出来ます。
指定した角度分、時計回りに回転します。単位はdegを指定します。なお、マイナスを指定した場合は反時計回りに回転します。
以下は要素の中央を起点に時計回りに45度回転させた例になります。

.rotate {
  transform:rotate(45deg);
}

結果

X軸：rotateX()

要素のX軸を起点に回転させる事が出来ます。
以下は要素のX軸を起点に180度回転させた例になります。

.rotate {
  transform:rotateX(180deg);
}

結果

Y軸：rotateY()

要素のY軸を起点に回転させる事が出来ます。
以下は要素のY軸を起点に180度回転させた例になります。

.rotate {
  transform:rotateY(180deg);
}

結果

Z軸：rotateZ()

rotateと同じです。
要素の中央を起点に回転させる事が出来ます。
例は割愛します。

最後に

rotate() は要素を回転させるという事を覚えておきましょう。