css3カルーセル-CSSチュートリアル-php.cn

css3カルーセル

php中世界最好的语言

リリース： 2018-03-21 16:50:01

オリジナル

2332 人が閲覧しました

今回は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:

<!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

フラット値はデフォルト値であり、すべてのサブ要素が 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 サイトの他の関連記事を参照してください。