なんとなくやってみて、もしかしたら今後使うことあるかもと思ったので備忘録。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); }
}
上記を記述することで以下デモのように要素が常に回転している動きになるのを確認できます。
ただ、ご覧の通りたしかに要素が回転している動きを実装できたのですが、これだけだと中に表示されているアイコンやテキストの表示も回転されており、それぞれ位置によって下向きになったり横向きになったりしてしまいます…。
回転させつつ、子要素の表示を維持する
先ほどの方法でとりあえず要素を回転させるという動きを実装できますが、先述したように単純に親要素に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)
と記述することで、以下デモのように子要素の表示を維持しつつ要素を回転させるという動きを実装することができます。