Wie dreht man in CSS3 rund um origin?

Habe ich die folgenden Buchstaben ABC, wie unten gezeigt:

 <body>
 <div id="container">
   <div id="shape" class="spin">
     <div id="A" class="plane">A</div>
     <div id="B" class="plane">B</div>    
     <div id="C" class="plane">C</div>
   </div>
 </div>

Was ich will, ist jeder Buchstabe zu drehen um die x-Achse?

Ich habe versucht (für letter C):

#C {
 -webkit-animation: spinAboutItsCentre 8s linear; 
}

@-webkit-keyframes spinAboutItsCentre {
  from { 
        -webkit-transform: rotateX(0); 
  }
  to   { 

   -webkit-transform: rotateX(360deg); 
  }
}

aber der Buchstabe C bewegt sich auf dem der Buchstabe a ist Ein spinnt es seine Achse.

Irgendwelche Ideen?

JD

Sind Sie sicher, dass Sie wollen rotateX anstatt nur rotate? Können Sie erstellen ein jsFiddle mit dem rest des Codes?

InformationsquelleAutor JD. | 2011-08-10

  1. 7

    Sollte es so Aussehen, müssen Sie Ihre transform-origin Eigenschaften;
    x -% y -% und z-px.

    Bemerken, dreht sich mit der Y-Achse schafft ein bisschen ausgeglichen, weil der Motor interpretation des Charakters position entspringt am "Anfang" (Seite) des Objekts, nicht die Mitte des Objekts.

    Den 0% - und 100% - Bezeichnungen darstellen, "von" und "zu" - Klauseln, mit diesem format können Sie hinzufügen, wie viele dieser Linien, wie Sie möchten, erhöhen Sie die Bewegung über Ihre festgelegten Zeitraum (z.B. 25% drehen 90Grad, 50% rotieren 180GRAD, 75% drehen 270deg, 100% drehen 360deg). 

    @-webkit-keyframes spinX
{  
0%   { -webkit-transform: rotateX(0deg); -webkit-transform-origin: 0% 50% 0;}  
100% { -webkit-transform: rotateX(360deg); -webkit-transform-origin: 0% 50% 0;}  
}

@-webkit-keyframes spinY
{  
0%   { -webkit-transform: rotateY(0deg); -webkit-transform-origin: 0% 0% 5;}  
100% { -webkit-transform: rotateY(360deg); -webkit-transform-origin: 0% 0% 5;}  
}

    Versuchen, diese Stile, die Sie sollten in Ordnung.

    #Ca
{  
position: absolute;  
left: 20%;  
font-size:72px;  
-webkit-animation: spinX 8s infinite;  
}

#Cb
{  
position: absolute;  
left: 20%;  
font-size:72px;  
-webkit-animation: spinY 8s infinite;  
}

<div id="Ca">C</div>  
<div id="Cb">C</div>
    Danke Chris, nur immer meinen Kopf um Ihren code. Ich bemerkte, ich habe eine Transformation : #C {opacity: 0.5; -webkit-transform: translateX(400px)}; und ich Frage mich, ob dies ist, was das problem verursacht? Wenn ich diesen code bei, kann ich mich trotzdem bewerben eine rotation? }
    Bist du mit dem -webkit - Präfix, also ich nehme an, Sie haben geprüft Ihr CSS in Chrome und oder Safari, da die Präfixe für IE, Firefox und Opera sind -ms-, -moz-und -o - bzw. (zumindest für jetzt), dass gesagt wird, getestet habe ich die Methode, die ich gepostet in Chrome und Safari mit einer Trübung von 0,5 deklariert und es funktionierte bei beiden. Es scheint, dein Problem hat mehr damit zu tun, mit dem erzählen den browser an, wie/wo der Anker das Zeichen für rotation. Hier ist eine große demo von, wie dieses CSS3-feature funktioniert: w3schools.com/cssref/trycss3_transform-origin_3d_inuse.htm
    Hi Chris, vielen Dank für deine Hilfe.

    InformationsquelleAutor Chris

  2. 2

    Verwandelt haben "transform-origin" mit Ihnen verbunden. Wenn keine transform-origin angegeben ist, wird er automatisch gesetzt (50%, 50%) des Elements. Wenn Sie Ihre genaue code wird eingegeben als ein jsfiddle, es funktioniert wie vorgesehen.

    Meine Vermutung ist, dass Sie in Ihrem kompletten code, den Sie angegeben haben, transform-origin falsch oder haben andere Skurrilität in die Basis-CSS für die Klasse.

    Update: So, ja, Sie hatten unheimliche Begegnungen in der base-CSS. Es wäre hilfreich, um zu sehen, Ihre komplette CSS und HTML zu Debuggen.

    InformationsquelleAutor Michael Mullany

Schreibe einen Kommentar