-1
ウェブページのコンテンツ領域を曲面テレビのように見せたいと思います。このような何か：曲線コンテンツ領域を作成するにはどうすればよいですか？
は、Webページが応答する必要はありませんが、私は、マウスを使用して曲線面積を-ズームインやズームアウトすることができるはずと曲線をスライドすることができるはずです。これを行うのに役立つ適切なフレームワーク/スクリプトを探しています。
A
答えて
0
を見て。
例ソース：http://keithclark.co.uk/articles/creating-3d-worlds-with-html-and-css/
デモ：http://codepen.io/keithclark/pen/ksayr
IFRAMEとCSSの変換を行う方法の例：
#transformation {
-webkit-perspective: 800;
perspective: 800;
margin: 100px 0 100px 50px;
}
#transformation iframe {
-webkit-transition: -webkit-transform 3s ease-in-out;
-webkit-transform: rotate3d(0, 1, 1, 60deg);
transition: transform 1s ease-in-out;
transform: rotate3d(0, 1, 1, 60deg);
}
#transformation iframe:hover {
-webkit-transform: rotate3d(0, 0, 1, 65deg);
transform: rotate3d(0, 0, 1, 65deg);
}
#transformation {
-webkit-perspective: 800;
perspective: 800;
margin: 100px 0 100px 50px;
}
#transformation iframe {
-webkit-transition: -webkit-transform 2s ease-in-out;
-webkit-transform: rotate3d(0, 1, 1, 50deg);
transition: transform 1s ease-in-out;
transform: rotate3d(0, 1, 1, 50deg);
}
#transformation iframe:hover {
-webkit-transform: rotate3d(0, 0, 1, 50deg);
transform: rotate3d(0, 0, 1, 55deg);
}
#transformation {
-webkit-perspective: 800;
perspective: 800;
margin: 100px 0 100px 50px;
}
#transformation iframe {
-webkit-transition: -webkit-transform 3s ease-in-out;
-webkit-transform: rotate3d(0, 1, 1, 60deg);
transition: transform 1s ease-in-out;
transform: rotate3d(0, 1, 1, 60deg);
}
#transformation iframe:hover {
-webkit-transform: rotate3d(0, 0, 1, 65deg);
transform: rotate3d(0, 0, 1, 65deg);
}
#transformation {
-webkit-perspective: 800;
perspective: 800;
margin: 100px 0 100px 50px;
}
#transformation iframe {
-webkit-transition: -webkit-transform 4s ease-in-out;
-webkit-transform: rotate3d(0, 1, 1, 750deg);
transition: transform 1s ease-in-out;
transform: rotate3d(0, 1, 1, 75deg);
}
#transformation iframe:hover {
-webkit-transform: rotate3d(0, 0, 1, 80deg);
transform: rotate3d(0, 0, 1, 450deg);
}
#transformation {
-webkit-perspective: 800;
perspective: 800;
margin: 100px 0 100px 50px;
}
#transformation iframe {
-webkit-transition: -webkit-transform 2s ease-in-out;
-webkit-transform: rotate3d(0, 1, 1, 50deg);
transition: transform 1s ease-in-out;
transform: rotate3d(0, 1, 1, 50deg);
}
#transformation iframe:hover {
-webkit-transform: rotate3d(0, 0, 1, 550deg);
transform: rotate3d(0, 0, 1, 55deg);
}
#transformation {
-webkit-perspective: 800;
perspective: 800;
margin: 100px 0 100px 50px;
}
#transformation iframe {
-webkit-transition: -webkit-transform 3s ease-in-out;
-webkit-transform: rotate3d(0, 1, 1, 60deg);
transition: transform 1s ease-in-out;
transform: rotate3d(0, 1, 1, 60deg);
}
#transformation iframe:hover {
-webkit-transform: rotate3d(0, 0, 1, 650deg);
transform: rotate3d(0, 0, 1, 65deg);
}<div id="transformation">
<iframe src = "http://www.c-sharpcorner.com/" height= 300px width= 400px /iframe>
</div>最後に、html5を使用してグリッドサーフェスを作成することができます。グリッド要素でiframeをレンダリングし、ズーム（マルチタッチまたはスクロールバー）などの便利なイベントを聴くことができます。そのようなサーフェスを構築し、イベントを管理するには、jQueryというjavascriptライブラリを使用します。
この回答が役に立ちましたら幸いです。
+0
これは素晴らしかったですが、それはすべてギリシャ語でラテン語です。ズームインしてズームアウトした曲線の壁のように見えるという簡単な例がありますか？ – StillLearning
+0
（http://keithclark.co.uk/labs/css-fps/desktop/）のバレルがあなたのサンプルです。前方に移動してズームインし、後方に移動してズームアウトします。それがあなたにとってギリシャ語の理由は、この仕事の難しさは難しいということです。簡単で難しい課題を解決することができますが、先進的な問題に苦しんでいるとすれば、困難な課題はいくつかの高度なレベルの問題（事前知識が必要です）を解決する必要があると考えてください。私はシニアレベルのソフトウェアエンジニアの場合、この作業には約2〜4時間かかり、建築家には30〜45m（テストあり）となると思います。 – Margus
+0
これがあなたの質問に答えることを願っています。それを実装する際に問題が発生した場合は、試したことと期待したとおりにうまくいかないことを示す別の質問をすることができます。私の警告は、すべての部分問題をエンドツーエンドで解決するエントリーレベルのソフトウェアエンジニアが〜2週間ほどかかってしまうことです（実際に試してみると仮定すると）すべてが容易であるとは思わないという警告です。あなたが問題をスキップし始めるならば、ちょうど良くなりません。 – Margus
-1
これを行うには、cssでborder-radiusを追加します。
<textarea style="border-radius: 30px;" rows="3"></textarea>
http://www.css3.info/preview/rounded-border/ は、あなたがrectangulesでそれを分割曲面コンテンツの錯覚を作成するための詳細情報については、この資料を通じて
+0
あなたは読んだり、理解しましたか？ 、 質問？ –
+0
あなたは曲がった画像ビューアが必要ですか？ – Abhinav
+0
Webページのコンテンツ領域が湾曲しているようにする必要があります。申し訳ありませんが、私の質問が明確でない場合。曲がった部分は、画像のように見えるはずです。また、曲線領域はズーム可能でなければなりません。http://threejs.org/examples/#css3d_periodictable曲面ビューアを探していません。 – StillLearning
関連する問題
- 1. Javascriptで画面の領域から画像を作成するにはどうすればよいですか？
- 2. 既存のd3領域をスタック領域に変換するにはどうすればよいですか？
- 3. Prefuseで積み上げ領域チャートを作成するにはどうすればよいですか？
- 4. Objective-Cに線と領域のセットを描画するにはどうすればよいですか？
- 5. AngularJSのテキスト入力領域を持つドロップダウンメニューを作成するにはどうすればよいですか？
- 6. javascriptを使用してフリーズ/非スクロールウィンドウ領域を作成するにはどうすればよいですか？
- 7. jscrollpane領域をスクロールするにはどうすればよいですか？
- 8. メインコンテンツ領域にコンテンツを読み込むドロップダウンを行うにはどうすればよいですか？
- 9. ブログのコンテンツ領域の幅をブロガーで増やすにはどうすればよいですか？
- 10. Windows Phone 7で分割スクロール領域を作成するにはどうすればいいですか？
- 11. 曲線下の領域 - 1D配列（Java）
- 12. ラティスの曲線下の色の領域
- 13. Java。サイズ変更可能なテキスト領域と固定ボタン領域でJPanelを作成するにはどうすればよいですか？
- 14. Chromeがテキスト領域をオートコンプリートしないようにするにはどうすればよいですか？
- 15. R：Polygon（）で曲線下の領域を塗りつぶす
- 16. バビロンズの線を使ってボックス領域を描くにはどうすればいいですか？
- 17. iOSチャートの折れ線グラフでセグメント線セクションを作成するにはどうすればよいですか？
- 18. コンテンツでフッタープッシュを作成するにはどうすればいいですか？
- 19. 私のROC曲線の領域はランダムな線の下にあります
- 20. サーフェスプロットのスライスを作成して線を作成するにはどうすればよいですか？ （Matlab）
- 21. 線と曲線の間の領域（機能なし）
- 22. Google App Engineで使用する領域を定義するにはどうすればよいですか？
- 23. WPFタブコントロールのタブ領域をコントロールよりも小さくするにはどうすればよいですか？
- 24. Drupal bootstarテーマでページヘッダ領域の全幅を作るにはどうすればいいですか？
- 25. イメージからすべての領域を抽出するにはどうすればよいですか？
- 26. timeseriesデータでggplotに領域プロットを描画するにはどうすればよいですか？
- 27. vtkで関心領域をインタラクティブに選択するにはどうすればよいですか？
- 28. このプラグインがコンテンツ領域の背後からポップアップしないようにするにはどうすればよいですか？
- 29. スクロールビューの全領域を占めるように線形レイアウトを取得するにはどうすればよいですか？
- 30. 異なる画像領域にリンクを追加するにはどうすればよいですか？
試してみてください。この5件のリンクをクリックしてください。 – Dhaval
@Dhavalありがとうございます – StillLearning