Est-il possible de faire pivoter l'élément, mais pas son contenu avec css3?

J'ai l'élément suivant

<a href="#" class="some_class">Test Text Here</a>

et cet élément a un fond bleu clair et du rembourrage. Aujourd'hui je suis tombé sur un petit défi: je sais que nous pouvons faire pivoter l'élément, mais son contenu est aussi une rotation. Ce que j'essayais d'atteindre ressemble à ceci:

Est-il possible de faire pivoter l'élément, mais pas son contenu avec css3?

Si l'élément lui-même est légèrement tourné, mais son contenu rester en place. Est-ce réalisable seulement avec CSS3? J'ai essayé de jouer avec plusieurs éléments imbriqués, cependant par la rotation de leur élément parent de tous les éléments d'enfant tourné ainsi. Aussi peut-on le faire avec un seul élément, comme par exemple indiqué ci-dessus?

source d'informationauteur Ilja | 2013-05-20

  1. 14

    Sûr, Si vous le texte à la ligne dans une plage, puis définir la durée pour position: absoluteet transform le montant équivalent dans la direction opposée à "par défaut".

    Je dirais contre super imposant sur le texte de votre lien dans votre proposition de cas ci-dessus, comme vous voulez que le texte soit à l'INTÉRIEUR de la balise d'ancrage pour les fins de SEO.

    Donc... j'ai fait tourner <a> 10 degrés de l'horaire, et tourner le <span> de 10 degrés dans le sens antihoraire.

    *****SINON** - Vous pouvez également définir la durée pour display: block; et déposez le positionnement absolu. Cela dépend de votre cas d'utilisation. Le positionnement absolu, dans ce cas, vous permettent de déplacer le texte autour avec un peu plus de contrôle.

    http://jsfiddle.net/B95xa/

    a {
color: #fff;
display: block;
width: 100px;
height: 30px;
background: blue;
border-radius: 5px;
-moz-transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-webkit-transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-o-transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-ms-transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}
span {
position: absolute;
-moz-transform: scale(1) rotate(-10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-webkit-transform: scale(1) rotate(-10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-o-transform: scale(1) rotate(-10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-ms-transform: scale(1) rotate(-10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
transform: scale(1) rotate(-10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}
  2. 0

    Vous avez 2 options que je suis conscient de:

    1. De faire d'eux des éléments séparés, et il suffit de tourner l'image de fond/div. Cette méthode pourrait fonctionner si vous avez besoin pour animer la rotation.
    2. Si vous utilisez une image, enregistrez l'image d'arrière-plan en tant que pré-biaisé.