CSS3 2D Transformación

CSS3 2The D transformation function allows in2transform elements in D space.

elements2D transformation

Using CSS3 2D transformation function, you can perform basic transformation operations on two-dimensional space elements, such as moving, rotating, scaling, and tilting.

Transformed elements do not affect the surrounding elements, but can overlap like absolutely positioned elements. However, transformed elements still occupy space in the layout at their default position (untransformed).

Using CSS transformations and transformation functions

CSS3 The transform attribute uses transformation functions to manipulate the coordinate system used by the element, so that transformation effects can be applied.

The following section describes these transformation functions:

translate() function

Using X and Y axes to move the element from its current position to a new position. It can be written as translate(tx, ty). If ty is not specified, it is assumed to be zero.

img　{
　　　　-webkit-transform:　translate(200px,　50px);　　/*　Chrome,　Safari,　Opera　*/
　　　　　　　-moz-transform:　translate(200px,　50px);　　/*　Firefox　*/
　　　　　　　　-ms-transform:　translate(200px,　50px);　　/*　IE　9　*/
　　　　　　　　　　　　transform:　translate(200px,　50px);　　　　　　
}

translate(200px, 50px) This feature moves the image horizontally along the positive x-axis20 pixels, y-axis vertical direction moves50 píxeles.}

La función rotate()

La función rotate() rota el elemento alrededor de su origen (especificado por el atributo transform-La propiedad origin especifica) rota el elemento en un ángulo especificado. Puede escribirse como rotate(a).

img　{
　　　　-webkit-transform: rotate(30deg);　　/*　Chrome,　Safari,　Opera　*/
　　　　　　　-moz-transform: rotate(30deg);　　/*　Firefox　*/
　　　　　　　　-ms-transform: rotate(30deg);　　/*　IE　9　*/
　　　　　　　　　　　　transform: rotate(30deg);　　　　　　
}

rotate(30deg) Esta función rota la imagen en sentido horario en torno a su origen30 grados. También puede usar valores negativos para rotar el elemento en sentido contrario a las agujas del reloj.

La función scale()

La función scale() aumenta o disminuye el tamaño del elemento. Puede escribirse como scale(sx, sy). Si no se especifica sy, se asume que es igual a sx.

img　{
　　　　-webkit-transform: scale(1.5);　　/*　Chrome,　Safari,　Opera　*/
　　　　　　　-moz-transform: scale(1.5);　　/*　Firefox　*/
　　　　　　　　-ms-transform: scale(1.5);　　/*　IE　9　*/
　　　　　　　　　　　　transform: scale(1.5);　　/*　Navegadores Modernos　*/　　　　
}

scale(1.5) escala el ancho y la altura de la imagen al 100% de su tamaño original.1.5veces. La función scale(1) o scale(1,1) no tiene efecto en el elemento.

La función skew()

La función skew() hace que el elemento se incline en un ángulo especificado en el eje X e Y. Puede escribirse como skew(ax, ay). Si no se especifica ay, se asume que es cero.

img　{
　　　　-webkit-transform: skew(-40deg,　15deg);　　/*　Chrome,　Safari,　Opera　*/
　　　　　　　-moz-transform: skew(-40deg,　15deg);　　/*　Firefox　*/
　　　　　　　　-ms-transform: skew(-40deg,　15deg);　　/*　IE　9　*/
　　　　　　　　　　　　transform: skew(-40deg,　15deg);　　/*　Navegadores Modernos　*/　　　　
}

La función skew(-40deg, 15deg) hace que el elemento se incline horizontalmente a lo largo del eje x-40 grados, y hace que el eje y se incline verticalmente15grados.

la función matrix()

la función matrix() puede ejecutar todos2La conversión D, por ejemplo, el desplazamiento, la rotación, la escala y el deslizamiento. Adoptamatrizde seis parámetros, se puede escribir como matrix(a, b, c, d, e, f). En la siguiente sección se le mostrará cómo usarla para representar cada2La función de transformación D: matrix().

• translate(tx, ty) = matrix(1, 0, 0, 1, tx, ty);—donde tx y ty son valores de traslación horizontal y vertical.

• rotate(a) = matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0);—donde, a son grados. Puede intercambiar sin(a) y-El valor de sin(a) se invierte con la rotación. La mayor rotación que puede realizar es360 grados.

• scale(sx, sy) = matrix(sx, 0, 0, sy, 0, 0);—donde sx y sy son los valores de escala horizontal y vertical.

• skew(ax, ay) = matrix(1, tan(ay), tan(ay), 1, 0, 0);—donde ax y ay son valores horizontales y verticales en grados.

Esto se realiza utilizando la función matrix()2Ejemplo de conversión D.

img　{
　　　　-webkit-transform: matrix(0,　-1,　1,　0,　200px,　50px);　　/*　Chrome,　Safari,　Opera　*/
　　　　　　　-moz-transform: matrix(0,　-1,　1,　0,　200px,　50px);　　/*　Firefox　*/
　　　　　　　　-ms-transform: matrix(0,　-1,　1,　0,　200px,　50px);　　/*　IE　9　*/
　　　　　　　　　　　　transform: matrix(0,　-1,　1,　0,　200px,　50px);　　
}

Sin embargo, al ejecutar múltiples transformaciones en una sola vez, es más conveniente usar una función de transformación única y enumerarlas en orden, como se muestra a continuación:

img　{
　　　　-webkit-transform:　translate(200px,　50px)　rotate(180deg)　scale(1.5)　skew(0,　30deg);　　/*　Chrome,　Safari,　Opera　*/
　　　　　　　-moz-transform:　translate(200px,　50px)　rotate(180deg)　scale(1.5)　skew(0,　30deg);　　/*　Firefox　*/
　　　　　　　　-ms-transform:　translate(200px,　50px)　rotate(180deg)　scale(1.5)　skew(0,　30deg);　　/*　IE　9　*/
　　　　　　　　　　　　transform:　translate(200px,　50px)　rotate(180deg)　scale(1.5)　skew(0,　30deg);　　　　　　
}

2Funciones de transformación D

La siguiente tabla resume brevemente todos2Función de transformación D