H5+C3 はカルーセルフォトアルバムを実装します-H5 チュートリアル-php.cn

H5+C3 はカルーセルフォトアルバムを実装します

php中世界最好的语言

リリース： 2018-03-26 14:08:20

オリジナル

3399 人が閲覧しました

今回は、カルーセルフォトアルバムを実現するための H5+C3 について説明します。 H5+C3 がカルーセルフォトアルバムを実現するための注意点については、次のとおりです。

レンダリング: ふふ、母校の育成の恩恵を忘れずに、大学の卒業式の写真をメリーゴーランドにしてみました~

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:

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

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

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

推奨読書:

H5の保存方法の詳細な説明

H5が制約検証APIを使用してクロスドメインおよびクロスウィンドウメッセージングを実現する方法

postMessage

以上がH5+C3 はカルーセルフォトアルバムを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。