Puis-je dessiner quelque chose comme Wheel of Fortune en utilisant CSS?

Je tiens à attirer une Roue de la Fortune à l'aide seulement de CSS et de jQuery. Je ne veux pas utiliser toutes les images.

Aussi, je veux avoir au moins 8 segments dans le cercle et aligner correctement chaque mot de texte verticalement dans chaque segment. Voici une photo pour illustrer:

Puis-je dessiner quelque chose comme Wheel of Fortune en utilisant CSS?

Une fois que j'ai ce travail, je peux utiliser CSS3 rotate propriété.

Une idée de comment je pourrais faire cela?

source d'informationauteur Jigar Jain

  1. 16

    Voici un rouet Démo fait en HTML5 à l'aide de la Toile: LIEN
    Puis-je dessiner quelque chose comme Wheel of Fortune en utilisant CSS?

    Direct de téléchargement pour le projet de démonstration des fichiers : ZIP

    EDIT: Voici un autre tutoriel de démonstration:

    la Création d'une roulette à l'aide de html5 canvas

  2. 6

    Voici un autre exemple d'un rouet à l'aide d'une Toile

    Puis-je dessiner quelque chose comme Wheel of Fortune en utilisant CSS?

  3. 2

    Vérifier ce lien -> http://joelb.me/blog/2011/css-mask-tutorial-rotating-image-gallery/

    Il contient un tutoriel d'introduction à un peu vous avez besoin. De vérifier la JS 2d Transformation bibliothèque de code sur github.

  4. 0

    J'ai créé une roue de roulette à l'aide de Raphaël: http://www.guesttime.com/members/ledlogic/roulette/index.html

    Il a le texte pivoté comme vous le faites, mais vous auriez à gérer le centrage pour chaque lettre.