Explicación detallada de la transformación en la serie css3 rotar

rotar

rotarX

rotarY

rotarZ

rotar3d

rotar:

Gira el elemento con el atributo transform-origin, que establece el punto de rotación. (También es posible no establecer el atributo de origen de transformación, pero rotará según el punto central del elemento, es decir, centro centro)

Agregue origen de transformación para establecer el punto de rotación. transform-origin se coloca según sí mismo, por lo que 0px 0px es el punto en la esquina superior izquierda.

rotateX:

Antes de hablar de esto, permítanme popularizar un conocimiento en transformación: ¿en qué se diferencian los ejes x, y y z del nuestro? x e y habituales, porque está al revés. El eje Z está en la posición 0, porque es 3D. Mira la imagen de abajo y sabrás dónde está cuando te des la vuelta.

A continuación, echemos un vistazo a lo que es el llamado eje Z.

La X de rotarX se puede escribir como x mayúscula o minúscula. En cuanto a esto, no tiene ningún efecto. atributo, después de agregar rotarX, este elemento se rotará a lo largo del eje X y se completará el ángulo.

Parece que no es tan intuitivo después de todo, es una imagen 2D. Agreguemos un efecto 3D (dado que transform-origin: 0 0 está configurado, no aparecerá en el archivo. elemento gira en el medio, pero gira alrededor del eje x en el punto 0 0)

Para las dos imágenes anteriores, la primera imagen se ve en 2D y la segunda imagen se ve en 3D. ¿El aspecto 3D es más intuitivo?

Luego, a continuación, use Y juntos, rotarX (45 grados) rotar Y (45 grados), ¿qué significan estos dos juntos? Este elemento primero se gira 45 grados según el eje X y luego se gira 45 grados. grados según el eje Y, ¿cuál será el siguiente resultado?

Como configuré transform-origin: center center; el punto fijo está en el centro, entonces los dos ejes se verán así.

Entonces, echa un vistazo, ¿el resultado es el que se muestra?

Finalmente, agregue rotarZ

rotar3D:

Establezca un eje principal y luego gire de acuerdo con este eje

Esto se puede configurar Hay 4 parámetros, los primeros tres son x y z y el último es el ángulo grados. Sin embargo, este x y z no es el mismo que los anteriores. Estos tres valores establecen la dirección del vector, no importa lo que completes. Lo principal es que la proporción es importante. Por ejemplo, 1, 1, 0, 0 grados, entonces es 1: 1: 0 = 100: 100: 0, ¿verdad? Es mejor usar este valor para ilustrar.