HTML5/CSS3 3D 立方体回転アニメーションの典型的なケース-H5 チュートリアル-php.cn

HTML5/CSS3 3D 立方体回転アニメーションの典型的なケース

黄舟

リリース： 2017-03-10 16:13:21

オリジナル

2144 人が閲覧しました

レンダリング:

HTML5/CSS3 3D 立方体回転アニメーションの典型的なケース

知識のポイント:

1. 変換の視点、復習

2. CSS3 背景、つまり表面上の小さなグリッドを実現します

3.アニメーションを実装します

HTML:

<body>


<p class="stage">
    <p class="cube">
        <p class="font"></p>
        <p class="back"></p>
        <p class="left"></p>
        <p class="right"></p>
        <p class="top"></p>
        <p class="bottom"></p>
    </p>

</p>


</body>

ログイン後にコピー

前の 3D 製品の表示で、立方体の作り方についてはすでに説明しましたが、そこには数字が記載されていますが、それほど派手ではありませんが、理論的にはこれよりも複雑です。～ここでは詳細には触れません。

CSS:

 html
        {
            background: -webkit-radial-gradient(center, ellipse, #430d6d 0%, #000000 100%);
            background: radial-gradient(ellipse at center, #430d6d 0%, #000000 100%);
            height: 100%;
        }

        .stage
        {
            -webkit-perspective: 1000px;
            width: 20em;
            height: 20em;
            left: 50%;
            top: 50%;
            margin-left: -10em;
            margin-top: -10em;
            position: absolute;
        }

        .cube
        {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-transform-style: preserve-3d;
            -webkit-transform: rotateX(-20deg) rotateY(-20deg);
        }

        .cube *
        {
            background: -webkit-linear-gradient(left, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px), 
            -webkit-linear-gradient(top, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px);
            -webkit-background-size: 2.5em 2.5em;

            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            width: 100%;
            height: 100%;
            border: 2px solid rgba(54, 226, 248, 0.5);
            -webkit-box-shadow: 0 0 5em rgba(0, 128, 0, 0.4);

        }

        .font
        {
            -webkit-transform: translateZ(10em);
        }

        .back
        {
            -webkit-transform: rotateX(180deg) translateZ(10em);
        }

        .left
        {
            -webkit-transform: rotateY(-90deg) translateZ(10em);
        }

        .right
        {
            -webkit-transform: rotateY(90deg) translateZ(10em);
        }

        .top
        {
            -webkit-transform: rotateX(90deg) translateZ(10em);
        }

        .bottom
        {
            -webkit-transform: rotateX(-90deg) translateZ(10em);
        }

ログイン後にコピー

同様に: stage はステージとして機能し、cube は子要素の効果を 3d に設定し、各面が回転され、translateZ が立方体を形成するように設定されます。

各サーフェスに小さなグリッドを設定するための背景を設定するコード:

     background: -webkit-linear-gradient(
                left,
                rgba(54, 226, 248, 0.5) 0px,
                rgba(54, 226, 248, 0.5) 3px,
                rgba(0, 0, 0, 0) 0px),
                        -webkit-linear-gradient(
                top,
                rgba(54, 226, 248, 0.5) 0px,
                rgba(54, 226, 248, 0.5) 3px,
                rgba(0, 0, 0, 0) 0px);

            -webkit-background-size: 2.5em 2.5em;

ログイン後にコピー

背景設定、左から右に 3 ピクセルのストリップ、上から下に 3 ピクセルのストリップを設定し、背景サイズを 2.5 に設定します。 em 2.5em にして、背景を繰り返すと、効果は次のようになります (境界線を追加しました):

これで完全な効果:

立方体が次のようになったことがわかります。アニメーションを追加するだけです。アニメーションは複雑だと思わないでください。実際は非常に簡単です~

アニメーションフレームを定義します:

 @-webkit-keyframes spin
        {
            from
            {
                -webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg);
                transform: translateZ(-10em) rotateX(0) rotateY(0deg);
            }

            to
            {
                -webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
                transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
            }
        }

ログイン後にコピー

名前はspin、translateZ(-10em)rotateXで始まります。 (0)rotateY(0deg); end 条件:translateZ(-10em)rotateX(360deg)rotateY(360deg); つまり、x 軸と y 軸を中心に同時に 360 度回転します。

最後に、このアニメーション属性をキューブに追加します:

  .cube
        {
            -webkit-animation: 6s spin linear infinite;
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-transform-style: preserve-3d;
            -webkit-transform: rotateX(-20deg) rotateY(-20deg);
        }

ログイン後にコピー

時間をアニメーション時間 6 秒、アニメーションの回転速度をリニア、無限ループを無限に設定します。

より詳細なパラメーター設定については、w3cSchool~ を参照してください。将来的にはCSS3のプロパティを個別に紹介するブログも書くつもりです~

さて、最終的なエフェクトは完成です~

元のWebサイトの見た目とは若干の違いがあります:

それぞれに1つ追加しているため側面の放射状グラデーションに、次を追加します:

    .cube *:before
        {
            display: block;
            background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0) 30%, rgba(0, 128, 0, 0.2) 100%);
            background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 30%, rgba(0, 128, 0, 0.2) 100%);
            content: &#39;&#39;;
            height: 100%;
            width: 100%;
            position: absolute;
        }

ログイン後にコピー

以上がHTML5/CSS3 3D 立方体回転アニメーションの典型的なケースの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。