Ist es möglich, Element zu rotieren, aber nicht seinen Inhalt mit CSS3?

Ich habe folgendes ElementIst es möglich, Element zu rotieren, aber nicht seinen Inhalt mit CSS3?

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

und dieses Element hat hellblauen Hintergrund und etwas Padding. Heute stieß ich auf eine kleine Herausforderung: Ich weiß, dass wir Elemente rotieren können, aber auch deren Inhalt wird gedreht. Was ich versuche, dies zu erreichen, sieht aus wie:

enter image description here

So das Element selbst etwas gedreht wird, jedoch bleibt sein Inhalt an Ort und Stelle. Ist das nur mit CSS3 möglich? Ich habe versucht, mit mehreren verschachtelten Elementen herumzuspielen, aber durch Drehen des übergeordneten Elements wurden auch alle untergeordneten Elemente gedreht. Kann dies auch mit einem einzelnen Element gemacht werden, wie zum Beispiel oben angegeben?

Quelle

2013-05-20 Ilja

nicht nisten Element, überlagern nur den Text über den blauen div – Sebas

@Sebas wow, erste Mal, dass ich über superpose hören, lassen Sie mich an dieser – Ilja

Eine andere Möglichkeit, um eine etwas Forschung zu tun ist Haben Sie ein verschachteltes Kind mit dem Text, wenden Sie die Drehung auf das übergeordnete Element an und wenden Sie dann die umgekehrte Drehung auf das untergeordnete Element an. (Obwohl ich Sebas Ansatz bevorzuge, überhaupt keine Verschachtelung zu machen.) – dlev

Sicher, Wenn Sie den Text in einer Spanne wickeln, legen Sie dann die Spanne position: absolute und transform es die gleiche Menge in der entgegengesetzten Richtung, es zu „default“.

würde ich gegen super-Auferlegung der Text über Ihren Link in Ihrem vorgeschlagenen Fall oben vorschlagen, wie sich der Text INSIDE die Anker-Tag für SEO Zwecke zu sein.

Also ... Ich drehte <a> 10 Grad im Uhrzeigersinn, und rotierte die <span> 10 Grad gegen den Uhrzeigersinn.

***** ALTERNATIV ** - Sie können auch den anzuzeigenden Bereich festlegen: block; und lasst die absolute Positionierung fallen. Es hängt von Ihrem Anwendungsfall ab. Durch die absolute Positionierung in diesem Fall können Sie den Text mit etwas mehr Kontrolle verschieben.

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); 
}

Quelle

2013-05-20 19:03:45 Michael

Sehr nützlich! Vielen Dank! –

Sie haben 2 Möglichkeiten, die ich bewusst bin:

Machen sie getrennte Elemente und drehen nur das Hintergrundbild/div. Diese Methode würde funktionieren, wenn Sie die Rotation animieren müssen.
Wenn Sie ein Bild verwenden, speichern Sie das Hintergrundbild als vorverzerrt.

Quelle

2013-05-20 19:03:30

Ist es möglich, Element zu rotieren, aber nicht seinen Inhalt mit CSS3?

Antwort

Verwandte Themen