HTML5/CSS3 特別トピック 3D カルーセル効果アルバムのサンプルコード-H5 チュートリアル-php.cn

HTML5/CSS3 特別トピック 3D カルーセル効果アルバムのサンプルコード

黄舟

リリース： 2017-03-30 15:49:30

オリジナル

6080 人が閲覧しました

このブログの目的は、以前の HTML5/CSS3 特別トピック CSS3 で Baidu Tieba の 3D 反転効果を作成するという古典的なケースでは、言及されていなかった CSS 3D 効果に関する重要な知識点があるためです。レンダリング: ふふ、大学の卒業式の写真をカルーセルにして、母校の養育の恩恵を忘れずに、文系専攻の周りを回転させました~

1. 視点

パースペクティブ属性には、なしと単位付きの長さの値の 2 つの属性が含まれます。

遠近感属性のデフォルト値は none です。これは、3D オブジェクトが無限の角度から見て平らに見えることを意味します。別の値は、0 より大きい長さ単位の値を受け入れます。また、その単位をパーセント値にすることはできません。の値が大きいほど、角度がより遠くに表示され、強度がかなり低くなり、3D 空間の変化はほとんどなくなります。逆に、この値が小さいほど角度が近くなり、角度が強くなり、立体的な変化が大きくなります。簡単に言うと、遠近法で長さを設定する場合、長さが小さいほど 3D 効果がより明白になり、目が 3D オブジェクトに近づきます。逆も同様です。

2.transform:translateZ(length)

視点を300pxに設定した場合、設定値が300pxに近いほど、translateZの値を小さくするほど、サブ要素のサイズが小さくなるとします。 300pxを超えると、要素が目の前にあるように見えます。その後、視野の奥に到達すると、要素は表示されなくなります。

上記の例の核心:

1. まず、すべての画像コンテナーをposition:absoluteでスタックし、rotateYをそれぞれ40*iに設定します(i= 0, 1, 2...9)。画像は花のような形に交差します

2. 次に、各画像コンテナーにtranslateZを設定すると、すべての画像が対応する角度から外側に移動し、上の図の効果となります。

html:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <link href="css/reset.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="../../jquery-1.8.3.js"></script>

    <script type="text/javascript">
        // alert( 64 / Math.tan(20 / 180 * Math.PI));
        var transform = function (element, value, key)
        {
            key = key || "Transform";
            ["Moz", "O", "Ms", "Webkit", ""].forEach(function (prefix)
            {
                element.style[prefix + key] = value;
            });

            return element;
        }


        $(function ()
        {
            var deg = -40 , i = 1;
            $("#container").click(function ()
            {
                transform($(this)[0], "rotateY(" + (deg * i++) + "deg)")
            });
        });

    </script>

   

</head>
<body>
<p id="stage">
    <ul id="container">
        <li>
            <img src="img/1.jpg"/>
            <span>Do one thing at a time, and do well..</span>
        </li>
        <li>
            <img src="img/2.jpg"/> <span>Do one thing at a time, and do well..</span>
        </li>
        <li>
            <img src="img/3.jpg"/> <span>Keep on going never give up.</span>
        </li>
        <li>
            <img src="img/4.jpg"/> <span>Whatever is worth doing is worth doing well.</span>
        </li>
        <li>
            <img src="img/5.jpg"/> <span>Believe in yourself.</span>
        </li>
        <li>
            <img src="img/6.jpg"/> <span>Action speak louder than words.</span>
        </li>
        <li>
            <img src="img/7.jpg"/> <span>Never put off what you can do today until tomorrow.</span>
        </li>
        <li>
            <img src="img/8.jpg"/> <span>Jack of all trades and master of none.</span>
        </li>
        <li>
            <img src="img/9.jpg"/> <span>Judge not from appearances.</span>
        </li>
    </ul>
</p>
</body>
</html>

ログイン後にコピー

CSS: ステージとして

        li
        {
            width: 128px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
            position: absolute;
            bottom: 0;
        }

        li img
        {
            width: 128px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
            vertical-align: middle;
        }

        li span
        {
            display: block;
            width: 128px;
            text-align: center;
            color: #333;
            font-size: 8px;
        }

        #stage
        {

            width: 900px;
            min-height: 100px;
            margin-left: auto;
            margin-right: auto;
            padding: 100px 50px;
            -webkit-perspective: 1200px;
            position: relative;
        }

        #container
        {
            background: url("img/xawl.jpg") no-repeat 0 0;
            margin-top: 200px;
            width: 128px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
            height: 100px;
            margin-left: -64px;
            -webkit-transition: -webkit-transform 1s;
            transition: transform 1s;
            -webkit-transform-style: preserve-3d;
            position: absolute;
            left: 50%;
        }

        li:nth-child(0)
        {
            -webkit-transform: rotateY(0deg) translateZ(300px);
        }

        li:nth-child(1)
        {
            -webkit-transform: rotateY(40deg) translateZ(300px);
        }

        li:nth-child(2)
        {
            -webkit-transform: rotateY(80deg) translateZ(300px);
        }

        li:nth-child(3)
        {
            -webkit-transform: rotateY(120deg) translateZ(300px);
        }

        li:nth-child(4)
        {
            -webkit-transform: rotateY(160deg) translateZ(300px);
        }

        li:nth-child(5)
        {
            -webkit-transform: rotateY(200deg) translateZ(300px);
        }

        li:nth-child(6)
        {
            -webkit-transform: rotateY(240deg) translateZ(300px);
        }

        li:nth-child(7)
        {
            -webkit-transform: rotateY(280deg) translateZ(300px);
        }

        li:nth-child(8)
        {
            -webkit-transform: rotateY(320deg) translateZ(300px);
        }

        li:nth-child(9)
        {
            -webkit-transform: rotateY(360deg) translateZ(300px);
        }

ログイン後にコピー

p#stage、パースペクティブを設定し、各 li にそれぞれrotateYとtranslateZを設定してから、p#containerと-webkit-transform-style:preserve-3d;を設定します。

transform-style: flat |preserve-3d

flat 値はデフォルト値であり、すべてのサブ要素が 2D 平面上にレンダリングされることを意味します。 prepare-3d は、すべての子要素が 3D 空間でレンダリングされることを意味します。要素のtransform-style値がpreserve-3dに設定されている場合、

は平坦化操作を実行せず、そのすべての子要素が3D空間に配置されることを意味します。通常、この属性は 3D アニメーション効果の実行要素に使用されます。つまり、3D アニメーション効果を適用するため、その子要素はすべて 3D 空間内に存在する必要があります。

注意すべき点が 1 つあります。この例では、実際のアニメーション効果はマウスのクリックによるもので、p#container がrotateY を不適切に変更しており、すべての画像要素が p#container 内にあり、カルーセル効果として表示されています。必要なのはトロイの木馬を回転させることなので、毎回 p#container の回転角度 40 を変更するだけで済みます。

以上がHTML5/CSS3 特別トピック 3D カルーセル効果アルバムのサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。