¿Cómo rotar en CSS3 alrededor del origen?

He las siguientes letras ABC como se muestra a continuación:¿Cómo rotar en CSS3 alrededor del origen?

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

Lo que quiero es que cada letra a girar alrededor de su eje x?

me trataron (por la letra C):

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

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

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

pero la letra C se mueve hacia el lugar donde la letra A es una que hace girar su eje.

¿Alguna idea?

Fuente

2011-08-10 JD.

¿Estás seguro de que quieres 'rotateX' en lugar de simplemente' rotar'? ¿Puedes crear un jsFiddle con el resto de tu código? –

Debería tener el siguiente aspecto, debe especificar las propiedades de origen de la transformación; x-%, y-% yz-px.

El aviso girar alrededor del eje Y crea un poco de desplazamiento porque la interpretación del motor de la posición del personaje se origina en el "comienzo" (lado) del objeto, no en el centro del objeto.

Las designaciones de 0% y 100% representan sus cláusulas "de" y "para", este formato le permite agregar tantas líneas como desee para incrementar el movimiento en el tiempo especificado (es decir, 25% rotar 90deg) , 50% giran 180 grados, 75% giran 270 grados, 100% giran 360 grados).

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

Pruebe estos estilos, deberían funcionar bien.

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

Fuente

2011-08-10 20:39:49 Chris

Gracias Chris, acaba de entender mi código. Noté que hice una transformación: #C {opacidad: 0.5; -webkit-transform: translateX (400px)}; y me pregunto si esto es lo que causó el problema? Si dejo este código, ¿puedo aplicar una rotación? } –

Está utilizando el prefijo -webkit- así que supongo que ha probado su CSS en Chrome y Safari ya que los prefijos para IE, Firefox y Opera son -ms-, -moz- y - o- respectivamente (al menos por ahora); Dicho esto, probé el método que publiqué en Chrome y Safari con una opacidad de 0.5 declarada y funcionó bien en ambos. Parece que tu problema tiene más que ver con decirle al navegador cómo/dónde anclar el personaje para la rotación. Aquí hay una gran demostración de cómo funciona esta característica de CSS3: http://www.w3schools.com/cssref/trycss3_transform-origin_3d_inuse.htm – Chris

Hola Chris, gracias por tu ayuda. –

las transformadas tienen un "origen transformar-" asociados con ellos. Cuando no se especifica ningún origen de transformación, se establece automáticamente en (50%, 50%) del elemento. Cuando se ingresa su código exacto como jsfiddle, funciona según lo previsto.

Supongo que en su código completo ha especificado un origen de transformación incorrectamente o tiene otras rarezas en el CSS base para su clase.

Actualización: Entonces, sí, tenía rareza en la base CSS. Sería útil ver su completo CSS y HTML para la depuración.

Fuente

2011-08-10 17:11:04

¿Cómo rotar en CSS3 alrededor del origen?

Respuesta

Cuestiones relacionadas