transform es un atributo de transformación de css, que permite mover, rotar, escalar e inclinar elementos.
Estilo y posición inicial del elemento:
<style>
#div1{
width: 100px;
height: 100px;
background-color: #1BBC9B;
}
</style>
<body>
<div id="div1">
transform变换属性
</div>
</body>
1. traducir parámetros de traducción
:
(1) traducir (eje x, eje y) mueve el elemento desde la posición actual a la posición (x, y).
(2) traducirX(x) traduce el elemento horizontalmente desde la posición actual a la posición x
(3) traducirY(y) traduce el elemento verticalmente desde la posición actual a la posición y
Los números positivos representan la traducción hacia abajo y hacia la derecha, los números negativos representan la traducción hacia arriba y hacia la izquierda.
Después de la transformación: traducir (100px, 100px): moverse hacia abajo y hacia la derecha 100px respectivamente, el efecto es el siguiente:
<style>
#div1{
width: 100px;
height: 100px;
background-color: #1BBC9B;
transform: translate(100px,100px);//进行移动操作
}
</style>
<body>
<div id="div1">
transform变换属性
</div>
</body>
2.
Parámetros de rotación de rotación:
rotar (ángulo) gira el elemento en el sentido de las agujas del reloj o en el sentido contrario a las agujas del reloj según el grado dado. Por ejemplo: 20 grados significa 20°.Donde los números positivos representan una rotación en el sentido de las agujas del reloj y los números negativos representan una rotación en el sentido contrario a las agujas del reloj. *
El efecto de girar 45° en el sentido de las agujas del reloj es el siguiente:
#div1{
width: 100px;
height: 100px;
background-color: #1BBC9B;
transform: rotate(45deg);//顺时针旋转45°
}
Bajo el efecto de girar 45° en sentido antihorario:
#div1{
width: 100px;
height: 100px;
background-color: #1BBC9B;
transform: rotate(-45deg);//逆时针旋转45°
}
3. Parámetros de escala de escala
:
(1) escala (x, y), cambia el ancho y alto del elemento original.
(2) scaleX(x) aumenta o reduce el ancho del elemento.
(3) escalaY(y) aumenta o reduce la altura del elemento.
Si el valor está entre 0 y 1, el ancho y alto correspondientes se reducirán; si el valor = 1, no cambiará; si el valor > 1, el ancho y alto correspondientes se ampliarán
El efecto de escalar (1.5,0.5) para aumentar el ancho 1,5 veces y reducir la altura a la mitad es el siguiente:
#div1{
width: 100px;
height: 100px;
background-color: #1BBC9B;
transform: scale(1.5,0.5);//伸缩：宽度增加，高度缩小
}
4.sesgado
La dirección vertical de la pantalla es el eje x y la dirección horizontal hacia la derecha es el eje y
Parámetros:
(1) sesgar(x,y) donde el tipo de valor de xey debe ser ángel, y el ángulo indica cuántos grados inclinar a lo largo del eje x o del eje y.
(2) skewX(angel) inclina el grado especificado a lo largo del eje x
(3) skewY(angel) inclina el grado especificado a lo largo del eje y
Nota: Un número positivo en el eje x indica una inclinación en sentido antihorario y un valor negativo indica una inclinación en el sentido de las agujas del reloj, que es lo opuesto a lo normal.
Incline 45° en sentido antihorario a lo largo del eje x:
#div1{
width: 100px;
height: 100px;
background-color: #1BBC9B;
transform: skewX(45deg);//倾斜：沿x轴逆时针倾斜45°
}
Inclinado 45° en sentido antihorario a lo largo del eje x:
Incline 45° en el sentido de las agujas del reloj a lo largo del eje x:
#div1{
width: 100px;
height: 100px;
background-color: #1BBC9B;
margin:auto;
transform: skewX(-45deg);//倾斜：x轴顺时针倾斜45°
}
Efecto de inclinación de 45° en el sentido de las agujas del reloj a lo largo del eje x:
Incline 45° en el sentido de las agujas del reloj a lo largo del eje y:
#div1{
width: 100px;
height: 100px;
background-color: #1BBC9B;
margin:200px auto;
transform: skewY(45deg);//倾斜：y轴顺时针倾斜45°
}
El efecto de inclinar 45° en el sentido de las agujas del reloj a lo largo del eje y se muestra en la figura:
transform: skewY(-45deg);//倾斜：y轴逆时针倾斜45°
El efecto de inclinar 45° en el sentido de las agujas del reloj a lo largo del eje y se muestra en la figura:
45° en el sentido contrario a las agujas del reloj a lo largo del eje x, 30° en el sentido de las agujas del reloj a lo largo del eje y
#div1{
width: 100px;
height: 100px;
background-color: #1BBC9B;
margin:200px auto;
transform: skew(45deg,30deg);//倾斜：x轴逆时针倾斜45°y轴顺时针倾斜45°
}
45° en sentido contrario a las agujas del reloj a lo largo del eje x, 30° en el sentido de las agujas del reloj a lo largo del
eje y . ,traducirY; En realidad es una matriz de 3*3. Para obtener más información, consulte el enlace de este blog: https://blog.csdn.net/web220507/article/details/124941437
6.transform-origin
establece la posición del punto base del elemento giratorio.
El valor predeterminado es: transform-origin: 50% 50% 0;
El origen de transformación predeterminado de un elemento es la mitad del elemento: transform-origin: centerer;
Los valores posibles son:
left:基点为元素左边中间位置，同left center一样
right :基点为元素右边中间位置，同right center一样
top:基点为元素上边中间位置，同top center一样
bottom:基点为元素下边中间位置，同bottom center一样
center:基点为元素中间位置，同center center一样
top left:基点为元素左上角，相当于坐标（0 0）
top right:基点为元素右上角
left bottom:基点为元素左下角
right bottom:基点为元素右下角
También se puede expresar en valor numérico, longitud (en px) y porcentaje. El porcentaje es relativo a su propio ancho visible y alto visible.
transform-origin:0,0;//基点在左上角
transform-origin:10px,10px;//变换原点为：x轴10px与y轴10px相交的位置
.div {
transform-origin: 50%;
}