Jak obrócić w CSS3 wokół początku?

Mam następujące litery ABC jak pokazano poniżej:Jak obrócić w CSS3 wokół początku?

<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>

Co chcę jest każda litera wirować wokół własnej osi x?

próbowałem (na literę C):

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

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

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

ale literę C przenosi się do miejsca, gdzie literą A jest to wiruje wokół własnej osi.

Wszelkie pomysły?

Źródło

2011-08-10 JD.

Czy na pewno chcesz 'rotateX' zamiast tylko' obrócić'? Czy możesz stworzyć jsFiddle z resztą kodu? –

Powinno to wyglądać mniej więcej tak, musisz określić swoje właściwości transformacji; x-%, y-% i z-px.

Zawiadomienie obracające się wokół osi Y tworzy przesunięcie, ponieważ interpretacja pozycji położenia znaku przez silnik rozpoczyna się od "początku" (boku) obiektu, a nie od środka obiektu.

Oznaczenia 0% i 100% reprezentują klauzule "od" i "do", format ten umożliwia dodanie tylu linii, ile chcesz, aby zwiększyć ruch w określonym przedziale czasowym (tj. 25% obrócić o 90 ° , 50% obrotu 180 stopni, 75% obrotu 270 stopni, 100% obrotu 360 stopni).

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

Wypróbuj te style, powinny działać poprawnie.

#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>

Źródło

2011-08-10 20:39:49 Chris

Dzięki Chris, po prostu przeczesuję twój kod. Zauważyłem, że zrobiłem transformację: #C {nieprzezroczystość: 0.5; -webkit-transform: translateX (400px)}; i zastanawiam się, czy to właśnie spowodowało problem? Jeśli zostawię ten kod, czy nadal mogę zastosować rotację? } –

Używasz prefiksu -webkit-, więc zakładam, że przetestowałeś swój CSS w Chrome i/lub Safari, ponieważ prefiksy dla IE, Firefox i Opery to -ms-, -moz- i - o- odpowiednio (przynajmniej na razie); Biorąc to pod uwagę, przetestowałem metodę, którą opublikowałem w obu przeglądarkach Chrome i Safari, z zadeklarowaną wartością zadeklarowaną na 0.5 i działało dobrze w obu. Wygląda na to, że Twój problem ma więcej wspólnego z informowaniem przeglądarki, jak/gdzie zakotwiczyć znak do obrotu. Oto wspaniała demonstracja działania tej funkcji CSS3: http://www.w3schools.com/cssref/trycss3_transform-origin_3d_inuse.htm – Chris

Witaj Chris, dzięki za pomoc. –

Transformacje mają "pochodzenie" transformacją powiązanych z nimi. Jeśli nie określono początku transformacji, jest ona automatycznie ustawiana na (50%, 50%) elementu. Kiedy twój dokładny kod zostanie wprowadzony jako jsfiddle, działa zgodnie z przeznaczeniem.

Domyślam się, że w swoim kompletnym kodzie błędnie określiłeś pochodzenie transformacji lub masz inną dziwność w podstawowym arkuszu CSS dla swojej klasy.

Aktualizacja: Tak, tak, masz dziwność w podstawowym CSS. Przy debugowaniu warto byłoby zapoznać się z kompletnymi CSS i HTML.

Źródło

2011-08-10 17:11:04

Jak obrócić w CSS3 wokół początku?

Odpowiedz

Powiązane problemy