HTML CSSとJavaScriptを使用した画像カルーセル回転錯視-jsチュートリアル-php.cn

HTML CSSとJavaScriptを使用した画像カルーセル回転錯視

Mary-Kate Olsen

リリース： 2024-11-07 14:05:03

オリジナル

447 人が閲覧しました

Image carousel rotation illusion using html css and javascript

コード

<!DOCTYPE html>
<html lang="ja">

<メタ文字セット="UTF-8">
<meta name="viewport" content="width=device-width、initial-scale=1.0">
<title>回転画像カルーセル</title>

    体 {
        ディスプレイ: フレックス;
        コンテンツの位置揃え: 中央;
        整列項目: 中央;
        高さ: 100vh;
        マージン: 0;
        背景色: #0d0d0d;
        オーバーフロー: 非表示;
        トランジション: 背景画像 0.5 秒の容易さ。
        背景サイズ: カバー;
        背景位置: 中央;

    }

    /* カルーセルコンテナ */
    .カルーセル {
        位置: 相対的;
        幅: 130ピクセル;
        高さ: 130ピクセル;
        変換スタイル: 3d を保存;
        視点: 1000ピクセル;
        トランジション: 1 を変換します。
    }

    /* 画像スタイル */
    .carousel img {
        位置: 絶対;
        高さ: 100%;
        幅: 100%;
        /* 幅: 150px;
        高さ: 150ピクセル; */
        境界半径: 10px;
        ボックスシャドウ: 0 0 10px rgba(255, 110, 199, 0.3);
        変換原点: 中心;
        トランジション: 変換 0.5 秒、フィルター 0.5 秒。
        不透明度: 0.8;
    }

    /* Y 軸を中心に各画像を配置します */
    .carousel img:nth-child(1) { 変換: 回転 Y(0 度) 変換 Z(150 ピクセル); }
    .carousel img:nth-child(2) { 変換: 回転 Y(72 度) 変換 Z(150 ピクセル); }
    .carousel img:nth-child(3) { 変換: 回転 Y(144 度) 変換 Z(150 ピクセル); }
    .carousel img:nth-child(4) { 変換: 回転 Y(216 度) 変換 Z(150 ピクセル); }
    .carousel img:nth-child(5) { 変換: 回転 Y(288 度) 変換 Z(150 ピクセル); }

    /* コントロールアイコン */
    .controls {
        位置: 絶対;
        下: 20ピクセル;
        左: 20ピクセル;
        ディスプレイ: フレックス;
        ギャップ: 10px;
    }
    .controls ボタン {
        幅: 40ピクセル;
        高さ: 40ピクセル;
        フォントサイズ: 18px;
        境界線: なし。
        背景色: #181616;
        色: #fff;
        カーソル: ポインタ;
        境界半径: 50%;
        遷移: 背景色 0.3 秒。
    }
    .controls ボタン:ホバー {
        背景色: #555;
    }
</スタイル>
</head>


<div>




          </div>

ログイン後にコピー

以上がHTML CSSとJavaScriptを使用した画像カルーセル回転錯視の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。