1. Conversión 2D
A través de la transformación CSS3, podemos mover, hacer zoom, rotar, biselar y otras operaciones en elementos.
1. Movimiento 2D: translate (). Con la función translate (), puede mover el elemento de su posición original. Mover el origen de la esquina superior izquierda del elemento de referencia
- Sintaxis: translate (tx) | translate (tx, ty)
- tx es la longitud de un vector que representa el movimiento del eje X (abscisas). Cuando su valor es positivo, el elemento se mueve hacia la dirección derecha del eje X; de lo contrario, cuando su valor es negativo, el elemento se mueve hacia la dirección izquierda del eje X.
- ty es la longitud de un vector que representa el movimiento del eje Y (escala longitudinal). Cuando su valor es positivo, el elemento baja por el eje Y, y cuando su valor es negativo, el elemento sube por el eje Y. Si ty no se establece explícitamente, es equivalente a ty = 0.
- También puede usar translateX (tx) o translateY (ty)
- Ejemplo de caso:
div:hover{
/*设置两个值，第一个参数表示X方向 第二个参数表示Y方向*/
/*transform: translate(100px,100px);*/
/*也可以只传入一个参数，表示X方向*/
/*transform: translate(100px);*/
/*也可以指定具体的方向,如下代码，表示Y方向正值方向上移动100px*/
transform:translateY(100px);
}
2. Escala 2D: escala (): La función escala () permite al elemento escalar el objeto de acuerdo con el origen del centro. El valor predeterminado es 1. Por lo tanto, cualquier valor entre 0.01 y 0.99 hace que un elemento se encoja, y cualquier valor mayor o igual a 1.01 hace que el elemento parezca más grande. La escala se refiere al punto central del elemento.
- Sintaxis: scale (sx | ty) | scale (sx, sy)
- sx: El vector de escala utilizado para especificar la dirección de la coordenada horizontal (eje X). Si el valor está entre 0,01 y 0,99, el objeto se reducirá en la dirección del eje X. Si el valor es mayor o igual a 1,01, el objeto se ampliará en la dirección del eje Y.
- sy: se utiliza para especificar la cantidad de zoom en la dirección de la coordenada longitudinal (eje Y). Si el valor está entre 0,01 y 0,99, el objeto se reducirá en la dirección del eje Y. Si el valor es mayor o igual a 1,01, el objeto se ampliará en la dirección del eje Y.
- También puede usar scaleX (sx) o scaleY (sy)
- Ejemplo de caso:
div:hover{
/*传入两个值，第一个参数表示X方向的缩放 第二个参数表示Y方向上的缩放*/
/*transform: scale(2,0.5);*/
/*也可以只传入一个值，表示X方向和Y方向上相同的缩放*/
/*transform: scale(2);*/
/*也可以指定具体方向上的缩放*/
transform: scaleX(2);
}
3. Rotación 2D: rotate (): La función rotate () asigna una rotación 2D al elemento de acuerdo con el origen del objeto a través del parámetro de ángulo especificado. Opera principalmente en un espacio bidimensional y acepta un valor de ángulo para especificar la amplitud de rotación. Si este valor es positivo, el elemento gira en sentido horario con respecto al centro de origen; si este valor es negativo, el elemento gira en sentido antihorario con respecto al centro de origen
- Sintaxis: rotate (a);
- a: Representa un valor de ángulo de rotación. Su valor puede ser positivo o negativo. Si el valor es positivo, el elemento gira en sentido horario con relación al punto central del elemento por defecto; si el valor es negativo, el elemento gira en sentido antihorario con relación al punto central del elemento por defecto
- Ejemplo de caso:
div:hover{
/*传入旋转的角度，如果正值，则进行顺时针旋转*/
/*transform: rotate(90deg);*/
/*如果传入负值，则逆时针旋转*/
transform: rotate(-270deg);
}
4. Invertir 2D: sesgar (): puede hacer que el elemento se muestre oblicuamente. Puede inclinar un objeto en un cierto ángulo alrededor del eje X y el eje Y con su posición central. Esto es diferente de la rotación de la función rotate (), que solo gira sin cambiar la forma del elemento. La función skew () no gira, solo cambia la forma del elemento
- 语法 ： sesgar (hacha) | sesgar (hacha, ay)
- ax: Se utiliza para especificar el ángulo de inclinación del elemento en la dirección horizontal (dirección del eje X).
- ay: Se utiliza para especificar el ángulo de inclinación del elemento en la dirección vertical (dirección del eje Y). Si este valor no se establece explícitamente, el valor predeterminado es 0.
- También puede utilizar skewX (sx) o skewY (sy)
- Ejemplo de caso:
div:hover{
/*在X方向上倾斜30度*/
transform: skewX(30deg);
}
}
5. Establezca el eje de rotación: transform-origin
- Ejemplo:
div{
width: 100px;
height: 100px;
margin: 100px auto;
background-color: red;
/*添加过渡*/
transition:all .5s;
/*设置缩放的中心，默认是元素中心位置,现修改为元素左上角*/
transform-origin: 0px 0px;
}
div:hover{
transform: scale(2);
}
6. Establecer múltiples atributos de transformación al mismo tiempo (conectados por espacios)
transform:translateX(500px) rotate(90deg);
Segundo, conversión 3D
La transformación tridimensional utiliza las mismas propiedades basadas en la transformación bidimensional, lo que nos permite transformar elementos basados en tres direcciones de coordenadas. Al igual que la deformación bidimensional, la deformación tridimensional se puede establecer mediante la propiedad de transformación
1. Movimiento 3D
- Método: translate3d (x, y, z) hace que los elementos se muevan en estas tres latitudes, o se pueden escribir por separado, como: translateX (longitud), translateY (longitud), translateZ (longitud)
- Ejemplo:
div:hover{
/*Y轴移动+100px*/
/*transform:translateY(100px);*/
/*X轴移动100px*/
/*transform:translateX(100px);*/
/*x轴和Y轴方向同时移动*/
transform:translate3d(100px,100px,0px);
}
2. Zoom 3D
- scale3d (número, número, número) hace que los elementos escalen en estas tres latitudes, o se pueden escribir por separado, como: scaleX (), scaleY (), scaleZ ()
- Ejemplo
div:hover{
/*Y轴方向放大1倍*/
/*transform: scaleX(2);*/
/*X轴方向缩小0.5*/
/*transform: scaleX(0.5);*/
/*x轴和Y轴方向同时进行缩放*/
transform: scale3d(2,0.5,1);
}
3. Rotación 3D
- rotate3d (x, y, z, angle): especifica el eje de coordenadas que debe rotarse
- rotateX (ángulo) es el elemento a rotar según el eje x;
- rotateY (ángulo) es el elemento a rotar según el eje y;
- rotateZ (ángulo) es rotar el elemento de acuerdo con el eje z
- Ejemplo:
div:hover{
/*Y轴方向旋转45度*/
/*transform: rotateY(45deg);*/
/*X轴方向旋转90度*/
/*transform: rotateX(90deg);*/
/*x轴和Y轴方向同时进行旋转放*/
transform: rotate3d(1,1,0,45deg);
}
Tres, caja de cubo
Utilice la propiedad de transformación css3 para hacer un cubo