CSSで子要素の表示を維持しつつ、要素を回転させる方法

Tips

CSSで子要素の表示を維持しつつ、要素を回転させる方法

なんとなくやってみて、もしかしたら今後使うことあるかもと思ったので備忘録。
CSSのtransform: rotate()animationを使って要素が常に回転するような動きを実装する際、単純に親要素にそれらを指定するだけだと中にある子要素の見栄えも回転します。
それを子要素の見栄えは回転せずにそのままの表示が維持されているように見せる方法です。

この要素達を時計回りにくるくると回転させたい

イメージだけでは伝わりづらいかもですが、以下ではこのように5つの要素があり、それらが時計回りにくるくると回転する動きをCSSで実装していくものになります。

基本的な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); }
}

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

See the Pen reJOgE by Naoya (@nxworld) on CodePen.

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

先ほどの方法でとりあえず要素を回転させるという動きを実装できますが、先述したように単純に親要素に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を記述し、その際animationanimation-name以外( animation-durationanimation-timing-function)を親要素と同じように記述していきます。
あとは、子要素で使用する@keyframes部分に親要素とは逆の動きになるようにtransform: rotate(-360deg)と記述することで、以下デモのように子要素の表示を維持しつつ要素を回転させるという動きを実装することができます。

See the Pen oxEjrL by Naoya (@nxworld) on CodePen.

Posted on

Category : Tips

Close the search window,
please press close button or esc key.