CSS を使用して簡単な 3D 効果カルーセルのサンプルコードを作成する-CSSチュートリアル-php.cn

CSS を使用して簡単な 3D 効果カルーセルのサンプルコードを作成する

高洛峰

リリース： 2017-03-16 11:24:36

オリジナル

2065 人が閲覧しました

私は最近、CSS3D のいくつかの機能を調べて、それらを実験して小さなデモを作成してみようと考えました。ただ練習してください。写真

CSS を使用して簡単な 3D 効果カルーセルのサンプルコードを作成する

に示すように、大まかな選択のトロイの木馬効果を開発することは、実際には、角度と位置を見つけて、各列の回転角度を計算し、3D 空間の上部の位置に配置することです。次に CSS の animateattribute を使用して 3D ステージをワイヤレスで回転させると、簡単なカルーセル効果が得られます。興味があれば、コード内の image パスを独自の画像アドレスに変更してみてください。直接ご利用いただけます。

コードは次のとおりです:

nbsp;html>
    <meta>
    <title></title>
    <style>
        .box{
            width:800px;
            height: 600px;
            margin:0px auto;
        }
        .box .stage{
            perspective:0px;
            perspective-origin: center center;
        }
        .box .stage .container{
            transform-style: preserve-3d;

        }
        .box ul,.box li{
            list-style: none;
            margin:0px;
            padding:0px;
            text-align: center;
            font-weight: bold;
        }
        .box ul{
            margin-left:200px;
            width:400px;
            height:400px;
        }
        .box li{
            position: absolute;
            margin-left:200px;
            width:10px;
            height:300px;
            background: blue;
            color:red;
            transform-origin: 5px top;
        }

        .box li> .horse{
            width:100px;
            height:100px;
            position: absolute;
            top:298px;
            left:-55px;
            border-radius: 50px;
            background-image: url("horse.jpg");
            background-size: contain;
        }

        .box ul{
            animation: run 20s linear infinite;
        }

        @-webkit-keyframes run {
            0%{
                transform: rotateY(0deg);
            }
            100%{
                transform: rotateY(360deg);
            }
        }

        @-webkit-keyframes horserun {
            0%{
                transform: translateY(0px);
            }
            100%{
                transform: translateY(50px);
            }
        }    </style>
    <script></script>
    <script>

        $(function(){            var len=$(".container>li").length;
            $(".container>li").each(function(e){                var index=$(".container>li").index(this)+1;
                $(this).css({                   "transform":"rotateY("+360/len * index+"deg) skew(60deg)"                });

            });
        })    </script><p>
    </p><p>
        </p>

ログイン後にコピー