CSS3 - Transformaciones 2d
Las transformaciones 2D se utilizan para volver a cambiar la estructura del elemento como trasladar, rotar, escalar y sesgar.
La siguiente tabla contiene valores comunes que se utilizan en transformaciones 2D:
| No Señor. | Valor y descripción |
|---|---|
| 1 | matrix(n,n,n,n,n,n) Se utiliza para definir transformaciones matriciales con seis valores. |
| 2 | translate(x,y) Se utiliza para transformar el elemento junto con el eje xy el eje y |
| 3 | translateX(n) Se usa para transformar el elemento junto con el eje x |
| 4 | translateY(n) Se usa para transformar el elemento junto con el eje y |
| 5 | scale(x,y) Se usa para cambiar el ancho y la altura del elemento. |
| 6 | scaleX(n) Se usa para cambiar el ancho del elemento |
| 7 | scaleY(n) Se usa para cambiar la altura del elemento. |
| 8 | rotate(angle) Se usa para rotar el elemento según un ángulo. |
| 9 | skewX(angle) Se utiliza para definir transformaciones sesgadas junto con el eje x |
| 10 | skewY(angle) Se utiliza para definir transformaciones sesgadas junto con el eje y |
Los siguientes ejemplos son el ejemplo de todas las propiedades anteriores.
Girar 20 grados
Rotación de la caja con un ángulo de 20 grados como se muestra a continuación:
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
/* IE 9 */
-ms-transform: rotate(20deg);
/* Safari */
-webkit-transform: rotate(20deg);
/* Standard syntax */
transform: rotate(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv">
Tutorials point.com
</div>
</body>
</html>Producirá el siguiente resultado:
Girar -20 grados
Rotación de la caja con un ángulo de -20 grados como se muestra a continuación -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
/* IE 9 */
-ms-transform: rotate(-20deg);
/* Safari */
-webkit-transform: rotate(-20deg);
/* Standard syntax */
transform: rotate(-20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv">
Tutorials point.com
</div>
</body>
</html>Producirá el siguiente resultado:
Inclinar el eje X
Rotación de caja con eje x sesgado como se muestra a continuación:
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#skewDiv {
/* IE 9 */
-ms-transform: skewX(20deg);
/* Safari */
-webkit-transform: skewX(20deg);
/* Standard syntax */
transform: skewX(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "skewDiv">
Tutorials point.com
</div>
</body>
</html>Producirá el siguiente resultado:
Inclinar el eje Y
Rotación de caja con eje y sesgado como se muestra a continuación:
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#skewDiv {
/* IE 9 */
-ms-transform: skewY(20deg);
/* Safari */
-webkit-transform: skewY(20deg);
/* Standard syntax */
transform: skewY(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "skewDiv">
Tutorials point.com
</div>
</body>
</html>Producirá el siguiente resultado:
Transformación de matriz
La rotación de la caja con Matrix se transforma como se muestra a continuación:
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv1 {
/* IE 9 */
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0);
/* Safari */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0);
/* Standard syntax */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv1">
Tutorials point.com
</div>
</body>
</html>Producirá el siguiente resultado:
Matrix se transforma con otra dirección.
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv2 {
/* IE 9 */
-ms-transform: matrix(1, 0, 0.5, 1, 150, 0);
/* Safari */
-webkit-transform: matrix(1, 0, 0.5, 1, 150, 0);
/* Standard syntax */
transform: matrix(1, 0, 0.5, 1, 150, 0);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv2">
Tutorials point.com
</div>
</body>
</html>Producirá el siguiente resultado: