CSS3カルーセルのサンプルチュートリアル-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS3カルーセルのサンプルチュートリアル

零下一度

Jul 16, 2017 pm 04:27 PM

csscss3

この記事では主に css3 カルーセルを紹介します。編集者がそれを参考にさせていただきました。エディターをフォローして見てみましょう

1. パースペクティブ

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

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

2.transform:translateZ(length)

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

上記の例の核心:

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="/static/imghwm/default1.png"  data-src="img/1.jpg"  class="lazy"  / alt="CSS3カルーセルのサンプルチュートリアル" >  
            <span>Do one thing at a time, and do well..</span>  
        </li>  
        <li>  
            <img  src="/static/imghwm/default1.png"  data-src="img/2.jpg"  class="lazy"  / alt="CSS3カルーセルのサンプルチュートリアル" > <span>Do one thing at a time, and do well..</span>  
        </li>  
        <li>  
            <img  src="/static/imghwm/default1.png"  data-src="img/3.jpg"  class="lazy"  / alt="CSS3カルーセルのサンプルチュートリアル" > <span>Keep on going never give up.</span>  
        </li>  
        <li>  
            <img  src="/static/imghwm/default1.png"  data-src="img/4.jpg"  class="lazy"  / alt="CSS3カルーセルのサンプルチュートリアル" > <span>Whatever is worth doing is worth doing well.</span>  
        </li>  
        <li>  
            <img  src="/static/imghwm/default1.png"  data-src="img/5.jpg"  class="lazy"  / alt="CSS3カルーセルのサンプルチュートリアル" > <span>Believe in yourself.</span>  
        </li>  
        <li>  
            <img  src="/static/imghwm/default1.png"  data-src="img/6.jpg"  class="lazy"  / alt="CSS3カルーセルのサンプルチュートリアル" > <span>Action speak louder than words.</span>  
        </li>  
        <li>  
            <img  src="/static/imghwm/default1.png"  data-src="img/7.jpg"  class="lazy"  / alt="CSS3カルーセルのサンプルチュートリアル" > <span>Never put off what you can do today until tomorrow.</span>  
        </li>  
        <li>  
            <img  src="/static/imghwm/default1.png"  data-src="img/8.jpg"  class="lazy"  / alt="CSS3カルーセルのサンプルチュートリアル" > <span>Jack of all trades and master of none.</span>  
        </li>  
        <li>  
            <img  src="/static/imghwm/default1.png"  data-src="img/9.jpg"  class="lazy"  / alt="CSS3カルーセルのサンプルチュートリアル" > <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 のすべての画像要素はカルーセル効果として表示されています。私たちが行うことは、このトロイの木馬を回転させることなので、毎回 p#container の回転角度 40 を変更するだけで済みます。

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

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。