3Dフォトアルバム効果の実現-CSSチュートリアル-php.cn

3Dフォトアルバム効果の実現

php中世界最好的语言

リリース： 2018-03-22 16:43:22

オリジナル

3856 人が閲覧しました

今回は、3Dフォトアルバム効果を実現する方法について説明します。3Dフォトアルバム効果を実現するための注意事項は何ですか?実際のケースを見てみましょう。

この記事では CSS3 プロパティを使用して例を作成します。早速、その効果を見てみましょう。

一部の属性の使用法については以前に説明したため、この記事では詳細には説明しません。この例のコーディングプロセスのみを記録します。プロジェクトコードは最後です。

レイアウト

htmlレイアウトを直接見てください:

    <p class="my-container">  <!-- 大容器 -->
        <p class="photo-wrap">  <!-- 舞台 -->
            <p class="container">   <!-- 相册容器 -->
                <p class="img img01"></p>
                <p class="img img02"></p>
                <p class="img img03"></p>
                <p class="img img04"></p>
                <p class="img img05"></p>
                <p class="img img06"></p>
                <p class="img img07"></p>
                <p class="img img08"></p>
                <p class="img img09"></p>
            </p>
        </p>
    </p>

ログイン後にコピー

スタイル

大きなコンテナ

一番外側の大きなコンテナは、実際の状況に応じてスタイルを定義するだけです。

    .my-container {        
        width: 800px;
        height: 500px;
        margin: 20px auto;
    }

ログイン後にコピー

ステージ要素

perspective属性は、そのすべてのサブ要素が遠近効果を取得できるように3D空間をアクティブにするために使用されます(3D変換を使用する要素、この例ではアルバムコンテナ要素)。

    .photo-wrap {
        perspective: 800px;
        width: 800px;
    }

ログイン後にコピー

アルバムコンテナ

アルバムコンテナのtransform-style:preserve-3d;スタイルは、すべての子要素が3D空間でレンダリングされることを意味します。

    .container {
        width: 800px;
        height: 500px;
        margin: 0 auto;
        position: relative;
        transform-style: preserve-3d;
    }

ログイン後にコピー

単一要素

    .img {
        width: 200px;
        height: 118px;
        line-height: 118px;
        text-align: center;
        position: absolute;
        top: 160px;
        left: 300px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.9) inset;
        background: pink;
    }

ログイン後にコピー

次に、ブラウザで効果を見てください:

右上の図からわかるように、各画像は同じ位置に固定されています。明らかに、これは私たちが望んでいる効果ではありません。しかし、望ましい効果を達成したい場合、どのように変更すればよいでしょうか?

これで、これらの画像はコンテナの中心点に平坦な形で表示されます。円を形成したい場合は、回転属性を使用する必要があります(Y軸を中心に回転する必要があるため、rotateYになります)。。

ここには合計9枚の写真があるので、360/9=40度の単位に従って各写真を個別に回転させます。

    .img01 {
        transform: rotateY(0deg);
    }
    .img02 {
        transform: rotateY(40deg);
    }
    .img03 {
        transform: rotateY(80deg);
    }
    .img04 {
        transform: rotateY(120deg);
    }
    .img05 {
        transform: rotateY(160deg);
    }
    .img06 {
        transform: rotateY(200deg);
    }
    .img07 {
        transform: rotateY(240deg);
    }
    .img08 {
        transform: rotateY(280deg);
    }
    .img09 {
        transform: rotateY(320deg);
    }

ログイン後にコピー

回転を追加した後、その効果を見てみましょう:

これらの写真は同じ平面上にありませんが、すべて一緒に圧縮されていることがわかりました。各写真を 300 度前に移動してみました。それ自体 (translateZ) ピクセルを実行して、何が起こるか見てみましょう。

    .img01 {
        transform: rotateY(0deg) translateZ(300px);
    }
    .img02 {
        transform: rotateY(40deg) translateZ(300px);
    }
    .img03 {
        transform: rotateY(80deg) translateZ(300px);
    }
    .img04 {
        transform: rotateY(120deg) translateZ(300px);
    }
    .img05 {
        transform: rotateY(160deg) translateZ(300px);
    }
    .img06 {
        transform: rotateY(200deg) translateZ(300px);
    }
    .img07 {
        transform: rotateY(240deg) translateZ(300px);
    }
    .img08 {
        transform: rotateY(280deg) translateZ(300px);
    }
    .img09 {
        transform: rotateY(320deg) translateZ(300px);
    }

ログイン後にコピー

回転と動きを追加した後の効果:

この時点で、期待した効果が得られています。お気に入りの写真を各

画像タグに追加すれば完了です。

アニメーション

このフォトアルバムを動かしたい場合は、アニメーションを追加するだけです。

    @keyframes rotateY360 {
        from {
            transform: rotateY(0deg);
        }
        to {
            transform: rotateY(360deg);
        }
    }

ログイン後にコピー

次に、アニメーション属性を「Album Container」コンテナ要素に追加します:

 animation: rotateY360 15s ease-in-out infinite;

ログイン後にコピー

最後に、これで完了です:

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

推奨読書:

CSSの中央揃えレイアウトのまとめ

左側が固定、右側がアダプティブレイアウト方法

ウォーターフォールフローレイアウトと無限読み込みのフォトアルバム効果

以上が3Dフォトアルバム効果の実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。