12

3D空間で物事をアニメートしたいと思います。これはCSSとHTML5で可能であることは知っていますが、実用的なチュートリアルが見つかりません。

例としてこのウェブサイトを見つけました。テキストなどをいつでも選択できます。誰かがこれがどのように機能するかを非常に理解しやすく、少し例を挙げてもらえますか？ソースコードは見えますが、よくわかりません…</ p>

これはCSS3またはHTML5、あるいはその両方ですか？

どのくらいのJavaScriptが必要ですか？

どのブラウザがこれをサポートしていますか？

4

2 に答える 2

86
于 2013-01-20T05:23:39.327 に答える
3

そのすべてのcss3とjavascript。お気に入りのインスペクターでサイトを調べて、ドームを掘り下げるだけで、次のようなものが表示されます。

-webkit-perspective: none;
-webkit-perspective-origin: 200px 200px;
-webkit-transform: matrix3d(-0.9386958080415784, -0.197569680458564, 0.2825179663820851, 0, 0, 0.8194947008605812, 0.5730867606754029, 0, -0.34474654452969944, 0.537954139890128, -0.7692562404101148, 0, 0, 0, 0, 1);
-webkit-transform-style: preserve-3d;
-webkit-transition-delay: 0s;
-webkit-transition-duration: 16s;
-webkit-transition-property: all;
-webkit-transition-timing-function: linear;

必要なJavaScriptの量は、実装方法によって異なります。「たくさん」または「少し」にすることができます。

ブラウザが最新のものであるほど、変更が適切に実行されます。ここをチェックして、どのブラウザが何をサポートしているかを確認してください。

于 2012-03-21T20:20:41.520 に答える