【CSS】ぐるぐる回転して目立たせる物体

　どうも！LSSです！！

今回はまたCSSサンプルです。

animationと3Dを使い、目立たせる効果を作ってみました^^

サンプル

本日のハイライト

NEW!!

コード

<style>
@keyframes grgra{
0%,30%{transform:rotateX(-5deg) rotateY(360deg);}
100%{transform:rotateX(-5deg) rotateY(0deg);}
}
.grwk0{
position:relative;
width:300px;
text-align:center;
border-radius:10px;
border:10px double #88ee88;
}
.grwk{
position:absolute;
top:0px;
transform-style:preserve-3d;
perspective:300px;
width:100%;
animation:grgra 3s linear infinite;
}
.grgr{
position:absolute;
text-align:center;
width:100%;
transform:translateZ(100px);
color:#ffff00;
text-shadow:2px 1px 0px #000000;
font-weight:bold;
}
</style>
<div class="grwk0">本日のハイライト
<div class="grwk">
<div class="grgr">NEW!!</div>
</div>
</div>

コード書き換えについて

赤太字部分

中に入る文字です。自由に書き換えて使用できます。

青太字部分

動作とは関係ない装飾部分です。
これも自由に書き換えて違う装飾を割り当てる事ができます。

参考：
【CSS】ボックス装飾によく使うプロパティ おさらいとサンプル集
【CSS】テキスト装飾によく使うプロパティ おさらいとサンプル集

オレンジ文字部分

top:0px;のところですが、ここの数値を変更する事で、回転体の縦位置を調整する事ができます。
マイナス値でもOKです。

緑太字部分

アニメーションの速度、停止状態・回転状態の時間比率を変更できます。
まず、
animation:grgra 3s linear infinite;
の「3s」は「3秒」を意味していて、ここの数字を大きくするとゆっくりに、小さくすると速く動くようになります。

次に、
0%,30%{transform:rotateX(-5deg) rotateY(360deg);}
の「30%」はアニメーション総時間のうちの「停止状態」の時間比率で、大きくすると停止している時間が長くなり、小さくすると停止している時間が短くなります。

最初の「3sの30%」としている場合、「0.9秒停止、残り2.1秒が回転」する時間という事になります。

おまけ

上記のサンプルは、いわば「NEW!!」と書いた一枚板をぐるぐる回しているようなものでした。

板自体は平面のまま回転しますが、これを円周に沿った曲面状に回したい場合…疑似的な方法ですが「１文字ごとの板として扱い、回転させる」という方法が考えられます。

@keyframesの角度を少しづつずらす事で、文字の並びを表現する事になり、分割した数だけ@keyframesを用意するという方法を試みてみました。
（もっとスマートなやり方もあるかもですが…）

本日のハイライト

N

E

W

!!

<style>
@keyframes grgrax1{
0%,30%{transform:rotateX(-5deg) rotateY(345deg);}
100%{transform:rotateX(-5deg) rotateY(-15deg);}
}
@keyframes grgrax2{
0%,30%{transform:rotateX(-5deg) rotateY(355deg);}
100%{transform:rotateX(-5deg) rotateY(-5deg);}
}
@keyframes grgrax3{
0%,30%{transform:rotateX(-5deg) rotateY(365deg);}
100%{transform:rotateX(-5deg) rotateY(5deg);}
}
@keyframes grgrax4{
0%,30%{transform:rotateX(-5deg) rotateY(375deg);}
100%{transform:rotateX(-5deg) rotateY(15deg);}
}
.grwk1{
position:relative;
width:300px;
text-align:center;
border-radius:10px;
border:10px double #88ee88;
}
.grwkx1,.grwkx2,.grwkx3,.grwkx4{
position:absolute;
top:0px;
transform-style:preserve-3d;
perspective:300px;
width:100%;
}
.grwkx1{
animation:grgrax1 3s linear infinite;
}
.grwkx2{
animation:grgrax2 3s linear infinite;
}
.grwkx3{
animation:grgrax3 3s linear infinite;
}
.grwkx4{
animation:grgrax4 3s linear infinite;
}
.grgr{
position:absolute;
text-align:center;
width:100%;
color:#ffff00;
transform:translateZ(100px);
text-shadow:2px 1px 0px #000000;
font-weight:bold;
}
</style>
<div class="grwk1">本日のハイライト
<div class="grwkx1">
<div class="grgr">N</div>
</div>
<div class="grwkx2">
<div class="grgr">E</div>
</div>
<div class="grwkx3">
<div class="grgr">W</div>
</div>
<div class="grwkx4">
<div class="grgr">!!</div>
</div>
</div>

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^