どうも！LSSです！！
【CSS】カタカタ自己主張する見出し（なのに照れ屋さん） - Little Strange Software
の３Dバージョンを作ってみました。
カタカタ自己主張する見出し・３Dバージョン
こんな風に、ボックス要素につけた見出しがカタカタ揺れる事で自己主張します！
そして、ボックスにマウスカーソルをのせると、一瞬、見出しから黄色のオーラがｗ
コード
<style><!--
@keyframes katakata3d{
0%{transform:perspective(100px) translateZ(0px) rotateY(0deg) rotateZ(-10deg);}
80%{transform:perspective(100px) translateZ(0px) rotateY(0deg) rotateZ(-10deg);}
85%{transform:perspective(100px) translateZ(0px) rotateY(60deg) rotateZ(10deg);}
90%{transform:perspective(100px) translateZ(0px) rotateY(-20deg) rotateZ(-10deg);}
95%{transform:perspective(100px) translateZ(0px) rotateY(60deg) rotateZ(10deg);}
100%{transform:perspective(100px) translateZ(0px) rotateY(0deg) rotateZ(-10deg);}
}
@keyframes knanm2{
0%{outline:0px #ffd400ff solid;}
100%{outline:70px #ffd40000 solid;}
}
.midashi3{
display:inline-block;
position:relative;
border-radius:15px;
border:10px double greenyellow;
padding:15px;
}
.midashi3:before{
display:inline-block;
content:"ここに注目！";
position:absolute;
top:-20px;
left:-20px;
background-color:yellowgreen;
padding:3px;
font-weight:bold;
color:white;
transform-origin:0% 50%;
animation:katakata3d 5s linear 0s infinite normal;
}
.midashi3:hover::before{
animation:katakata3d 5s linear 0s infinite normal,knanm2 0.5s linear 0s 1 normal;
}
--></style>
<div class="midashi3">
<p>こんな風に、ボックス要素につけた見出しがカタカタ揺れる事で自己主張します！</p>
<p>そして、ボックスにマウスカーソルをのせると、一瞬、見出しから黄色のオーラがｗ</p>
</div>
カタカタする動きを指定している部分
コードの冒頭で、
0%{transform:perspective(100px) translateZ(0px) rotateY(0deg) rotateZ(-10deg);}
80%{transform:perspective(100px) translateZ(0px) rotateY(0deg) rotateZ(-10deg);}
85%{transform:perspective(100px) translateZ(0px) rotateY(60deg) rotateZ(10deg);}
90%{transform:perspective(100px) translateZ(0px) rotateY(-20deg) rotateZ(-10deg);}
95%{transform:perspective(100px) translateZ(0px) rotateY(60deg) rotateZ(10deg);}
100%{transform:perspective(100px) translateZ(0px) rotateY(0deg) rotateZ(-10deg);}
が「カタカタ」する動きを設定している部分となります。
rotateYは奥行を前後する角度で、rotateZは上下の角度の変化を指定しています。
コード全文をコピペした上で、「〇〇deg」の数値を変えてみると、より面白い動きになるかもですね^^
あとがき
この「カタカタする見出し」に「ふりむきカーン」を入れようとしていましたが…どうもしっくりこなくて、こんなカタチになりました^^;
カタカタとは分けて考えるべきだったかな？と思いつつ、とりあえずバリエーションのひとつとして あげちゃっておきます！ｗ
その他、アニメーションするボックスは
↑こちらにまとめています^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
