Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【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秒が回転」する時間という事になります。

 

 

 

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

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