css3カルーセル

今回はcss3カルーセルを紹介します。css3カルーセルを実装する際の注意事項は何ですか?実際のケースを見てみましょう。

1. パースペクティブ

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

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

2.transform:translateZ(length)

パースペクティブが 300px に設定されている場合、translateZ の値が小さく設定されるほど、値がそれに近づくとサブ要素のサイズが小さくなるとします。 300 ピクセルの場合、要素が目の前にあるように見えます。300 ピクセルを超えると、要素は視野の奥に到達し、見えなくなります。

上記の例の核心:

1. まず、すべての画像のコンテナ位置を絶対的に重ね合わせ、rotateY をそれぞれ 40*i に設定します (i= 0、1、2...9)。すべての画像が花のような形に交差します

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

html:

nbsp;html>  
  
  
    <title></title>  
    <meta>  
   <link>  
    <script></script>  
  
    <script>  
        // 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>  
  
     
  
  
  
<p>  
    </p>

           
•                               Do one thing at a time, and do well..           
           
•                 Do one thing at a time, and do well..           
           
•                 Keep on going never give up.           
           
•                 Whatever is worth doing is worth doing well.           
           
•                 Believe in yourself.           
           
•                 Action speak louder than words.           
           
•                 Never put off what you can do today until tomorrow.           
           
•                 Jack of all trades and master of none.           
           
•                 Judge not from appearances.           
       

        

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

フラット値はデフォルト値であり、すべてのサブ要素が 2D 平面上にレンダリングされることを意味します。 prepare-3d は、すべての子要素が 3D 空間でレンダリングされることを意味します。要素のtransform-style値がpreserve-3dに設定されている場合、平坦化操作は実行されず、そのすべての子要素が3D空間に配置されることを意味します。通常、この属性は 3D アニメーション効果の実行要素に使用されます。つまり、3D アニメーション効果を適用するため、その子要素はすべて 3D 空間内に存在する必要があります。

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

あなたが知らない不人気な CSS プロパティ

CSS の絶対配置がすべての解像度と互換性がある方法

CSS3 属性のトランジション、アニメーション、トランスフォーム

以上がcss3カルーセルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。