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