CSSとjQueryだけを使ってWheelofFortuneを描きたいです。画像は使いたくない。
また、少なくとも8セグメントを円の中に入れ、各テキストWordを各セグメントで垂直に適切に配置したいと思います。これが説明する写真です:
これが機能するようになったら、CSS3 rotate
プロパティを使用できます。
どうすればこれを行うことができますか?
これがCanvasを使用してHTML5で行われたスピニングホイールデモです: [〜#〜] link [〜 #〜]
プロジェクトのデモファイルへの直接ダウンロード: Zip
編集:これは別のチュートリアルデモです:
html5キャンバスを使用したルーレットホイールの作成
これは、Canvasを使用した スピニングホイール の別の例です。
このリンクを確認してください-> http://joelb.me/blog/2011/css-mask-tutorial-rotating-image-gallery/
ある程度必要な入門チュートリアルが含まれています。 githubでもJS 2d Transformation
ライブラリコードを確認してください。
私は次の場所でRaphaelを使用してルーレットホイールを作成しました: http://www.guesttime.com/members/ledlogic/roulette/index.html
テキストはあなたと同じように回転しますが、各文字の中央揃えを処理する必要があります。