どうも！LSSです！！
先日の記事、「【CSS】はためく【実用性ある？？】」の応用ですが、
「カードをめくる」
という動作を、実は以前からやってみたいと思っていました。
実際に作れる事は知っていましたが、今回ちょっと挑戦してみたのです。
カードをめくるサンプル
↑「めくる」をクリックしてみてください^^
コード
<style><!--
.card{
position:relative;
width:150px;
height:200px;
}
.a{
position:absolute;
border:1px solid black;
border-radius:15px;
width:150px;
height:200px;
padding:1em;
transition:2s;
backface-visibility:hidden;
}
.a[data-omote=true]{
transform:perspective(500px) rotateY(0deg);
}
.a[data-omote=false]{
transform:perspective(500px) rotateY(180deg);
}
.b{
position:absolute;
border:10px double black;
border-radius:15px;
width:150px;
height:200px;
padding:1em;
background-color:pink;
transition:2s;
backface-visibility:hidden;
}
.b[data-omote=true]{
transform:perspective(500px) rotateY(180deg);
}
.b[data-omote=false]{
transform:perspective(500px) rotateY(360deg);
}
--></style>
<script>// <![CDATA[
function mkr(){
if(c1a.getAttribute('data-omote')=="true"){
c1a.setAttribute('data-omote', false);c1b.setAttribute('data-omote', false);
}else{
c1a.setAttribute('data-omote', true);c1b.setAttribute('data-omote', true);
}
}
// ]]></script>
<div class="card">
<div id="c1a" class="a" data-omote="false">カード表面の文章</div>
<div id="c1b" class="b" data-omote="false"> </div>
</div>
<p><a href="#" onclick="mkr();return false;">めくる</a></p>
解説…とまでいかないですが、とりあえず理屈だけ
<div style="position:relative;">
<div style="position:absolute;"></div>
<div style="position:absolute;"></div>
</div>
のように、<div>タグの中に２つ<div>タグを挟み、その中の２つの<div>に対して
position:absolute;
を指定すると、中の２つは「位置が重なって」表示されます。
その中のほうの２つの<div>を、片方は rotateY(0deg) に、もう片方を rotateY(180deg) で最初から180度ひっくり返った状態に指定しておきます。
あとは、JavaScriptで「めくる」動作を制御し、今回の例だと「めくる」をクリックした時に0deg→180deg、180deg→360degに変更します。
別途CSSで、transition:2s;を仕込んでいるので、回転はアニメーションになります。
また、CSSでbackface-visibility:hidden;を書いておくと「裏返った時に非表示」になります。
カードの表面を書いた紙と、裏面を書いた紙を貼り合わせて、一枚のカードを作っているイメージですね^^
とりあえず、めくる動作は出来ていますが
コード、もうちょっとシンプルに出来そうな気がします。
今少し、色々試したいところですね。
で、本当はこれ、
で やりたかったのですが、手間がかかりすぎそうだったので先送りにしていたネタだったりしますｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
