CSS3 フリップカード番号サンプルコード

今日会社から課題をもらったのですが、効果図は以下のとおりです。

どのような効果を実現したいかは特に決めていませんでしたが、純粋なデジタル変換ではシンプルすぎると思ったので、カードをめくる効果だけにしました。

エフェクトのプレビューは新しいウィンドウで開きます: https://codepen.io/andy-js/pen/ExaGxaL

まずページレイアウトを行います。

<ul></ul>

 本文{背景: #000;}
     ul{
         リストスタイル: なし;
         マージン:100px 0;
         ディスプレイ: フレックス;
         コンテンツを中央揃えにする。
         行の高さ: 56px;
         高さ:56px;
         フォントサイズ: 39.6px;
         色: #FFFFFF;
         変換スタイル:3D を保持します。
         パースペクティブ:1000px;
     }
     li{
        高さ:56px;
        マージン:0 10px;
        背景:なし;
        幅:16px;
        位置: 相対的;
     }
     .num{
        幅:46ピクセル;
        変換スタイル:3D を保持します。
        パースペクティブ:1000px;
        変換:Y軸を0度回転します。
        遷移: 1s すべて緩和;
    }
    p{
        高さ:56px;
        幅:46ピクセル;
        テキスト配置: 中央;
        背景: #EC2C5C;
        境界線の半径: 2.57px;
        位置: 絶対;
    }
    
    p:n番目の子(2){
        変換: スケールx(-1) 移動Z(-1px);
    }

次に、動的な挿入を通じて、このような効果をシミュレートします。アニメーションを作成するには、Transition を使用します。反転を作成するには、Transform:rotateY を使用します。反転する前に、別の数値 scalex を左右にミラーリングしてから、translateZ (-1px) を他の数値の背面に移動します。このようにして、反転するとミラーリングされた数値が表示されます。完璧ではなく、改善できる場所はまだたくさんあります。完全なコードは次のとおりです。

<スクリプト>
var 番号 = 9999993、
    numArr=addComma(数値)、
    数値=[],
    oUl=document.getElementsByTagName('ul')[0];
for(let i=0;i<numArr.length;i++){
    li = document.createElement('li') とします。
    oUl.appendChild(li);
    if(numArr[i]==',')
    li.innerHTML=',';
    それ以外
    li.innerHTML='<p>'+numArr[i]+'</p><p></p>',
    li.className='num',
    li.deg=0,
    aNum.push(li);
};

setInterval(関数(){
    changeNum=number+1+'' とします。
    changeArr = addComma(changeNum) とします。
        差=changeArr.length-numArr.length;
    if(違い){
        for(let i=0;i<difference;i++){
            li = document.createElement('li') とします。
            oUl.insertBefore(li、oUl.children[0]);
            if(changeArr[i]==',')
            li.innerHTML=',';
            それ以外
            li.innerHTML='<p>'+changeArr[i]+'</p><p></p>',
            li.className='num',
            li.deg=0,
            aNum.unshift(li);
        };
    };
    数値+='';
    for(let i=changeNum.length-number.length;i<changeNum.length;i++){
        if(changeNum[i]==number[i]) 続行;
        deg = aNum[i].degとします。
        aNum[i].deg=deg=deg+180;
        index=(deg/180)%2とします。
        aNum[i].children[index].innerHTML=changeNum[i];
        aNum[i].style.transform='rotateY('+deg+'deg)';
    };
    数値=数値(changeNum);
    numArr=変更Arr;
},2000);


function addComma(num){ //3桁ごとに豆番号を追加します return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
};
</スクリプト>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: HTML およびプラグインアプリケーションにおけるデータカスタム属性の使用の概要

>>: セマンティクス: Html/Xhtml は本当に標準に準拠していますか?