CSS3 シンプルカットカルーセル画像実装コード

実装のアイデア

まず、親コンテナーを作成し、2 つの順序なしリストを使用して、柔軟なレイアウトで親コンテナーを 2 つの列に分割します。
li に画像を保存する場合、左の li に {background: url('image address') no-repeat; background-size: 200% 100%;}、右の li に {background-position-x: -300 (親コンテナの幅の半分) px;} を指定することで、画像を 2 つの列に分割できます。
ブラウザの 3D 表示を有効にするには、ul に {ransform-style: preserve-3d; } 属性を指定します。
子と親を使用して、li を積み重ねます ul{position: relative;} li {position: absolute;}。
transform プロパティを使用して li の回転を設定します。
ここで、.box:hover>ul { transition: all 5s;transform: rotateX(360deg); } を追加して効果を確認できます。
最後に、ユーザーが自分で画像を切り替えることができるように 2 つのボタンを追加します。
クリックすると、ulの回転角度が変更されます

  btn1.onclick = ()=>{
            アイテム++;
            r = アイテム * 90 とします。
            letf.style.transform = 'rotateX(' + r + 'deg)';
            letf.style.transition = 'すべて 1';
            right.style.transform = 'rotateX(' + r + 'deg)';
            right.style.transition = 'すべて 1 .3';
        }
        btn2.onclick = ()=>{
            アイテム - ;
            r = アイテム * 90 とします。
            letf.style.transform = 'rotateX(' + r + 'deg)';
            letf.style.transition = 'すべて 1';
            right.style.transform = 'rotateX(' + r + 'deg)';
            right.style.transition = 'すべて 1 .3';
        }

最後に、すべてのコードを添付します。フロントエンドの学習に役立つことを願っています。

HTMLコード

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>カルーセル画像を切り取る</title>
</head>
<本文>
    <div class="box">
        <ul class="letf">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul class="right">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <button id="btn1">前のページ</button><button id="btn2">次のページ</button>
</本文>
</html>

CSSコード

*{
    マージン: 0;
    パディング: 0;
}
体{
    パースペクティブ: 800px;
}
。箱{
    ディスプレイ: フレックス;
    幅: 600ピクセル;
    高さ: 350ピクセル;
    マージン: 150px 自動;
}
.box:hover ul li:nth-child(1){
    遷移: すべて 5 秒;
    変換: rotateX(360deg);
}
ul{
    フレックス: 1;
    リストスタイル: なし;
    パディング: 0;
    マージン: 0;
    transform-style: preserve-3d; /* ブラウザで 3D 表示を有効にする*/
    位置: 相対的;
}
li{
    幅: 100%;
    高さ: 100%;
    位置: 絶対;
}
li:n番目の子(1){
    背景: url('../images/9.jpg') 繰り返しなし;
    背景サイズ: 200% 100%;
    変換: translateZ(175px);

}
li:n番目の子(2){
    背景: url('../images/10.jpg') 繰り返しなし;
    背景サイズ: 200% 100%;
    変換: 回転X(90度) 移動Z(175ピクセル);
}
li:n番目の子(3){
    背景: url('../images/11.jpg') 繰り返しなし;
    背景サイズ: 200% 100%;
    変換: 回転X(180度) 移動Z(175ピクセル);
}
li:n番目の子(4){
    背景: url('../images/12.jpg') 繰り返しなし;
    背景サイズ: 200% 100%;
    変換: 回転X(-90度) 移動Z(175px);
}
.right li{
    背景位置x: -300px;
}

jsコード

  項目を 0 にします。
        btn1 = document.getElementById('btn1'); とします。
        btn2 = document.getElementById('btn2'); とします。
        let letf = document.querySelector('.letf');
        右 = document.querySelector('.right') とします。
        btn1.onclick = ()=>{
            アイテム++;
            r = アイテム * 90 とします。
            letf.style.transform = 'rotateX(' + r + 'deg)';
            letf.style.transition = 'すべて 1';
            right.style.transform = 'rotateX(' + r + 'deg)';
            right.style.transition = 'すべて 1 .3';
        }
        btn2.onclick = ()=>{
            アイテム - ;
            r = アイテム * 90 とします。
            letf.style.transform = 'rotateX(' + r + 'deg)';
            letf.style.transition = 'すべて 1';
            right.style.transform = 'rotateX(' + r + 'deg)';
            right.style.transition = 'すべて 1 .3';
        }

CSS3 シンプルカッティングカルーセルの実装コードに関するこの記事はこれで終わりです。CSS3 カッティングカルーセルに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: DockerコンテナでLNMPをコンパイルする例

>>: Vueトップタグ閲覧履歴の実装