{"id":1406,"date":"2024-08-01T19:45:19","date_gmt":"2024-08-01T17:45:19","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1406"},"modified":"2024-08-01T19:45:20","modified_gmt":"2024-08-01T17:45:20","slug":"10-transformaciones-2d","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/css3-avanzado\/10-transformaciones-2d\/","title":{"rendered":"10. Transformaciones 2D"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Las <strong>transformaciones CSS<\/strong> te permiten mover, rotar, escalar y sesgar elementos. En este cap\u00edtulo estudiaremos acerca de la siguiente propiedad:<\/p>\n\n\n\n<!--more-->\n\n\n\n<ul class=\"wp-block-list\">\n<li>transform<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">M\u00e9todos de transformaci\u00f3n CSS 2D<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Con la propiedad <strong><em>transform<\/em> <\/strong>podemos usar los siguientes m\u00e9todos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>translate()<\/li>\n\n\n\n<li>rotate()<\/li>\n\n\n\n<li>scaleX()<\/li>\n\n\n\n<li>scaleY()<\/li>\n\n\n\n<li>scale()<\/li>\n\n\n\n<li>skewX()<\/li>\n\n\n\n<li>skewY()<\/li>\n\n\n\n<li>skew()<\/li>\n\n\n\n<li>matrix()<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">El m\u00e9todo translate()<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">El m\u00e9todo <strong><em>translate()<\/em><\/strong> mueve un elemento desde su posici\u00f3n actual (seg\u00fan los par\u00e1metros proporcionados para el eje X y el eje Y). El siguiente ejemplo mueve el elemento <strong><em>&lt;div&gt;<\/em><\/strong> 50 p\u00edxeles a la derecha y 100 p\u00edxeles hacia abajo desde su posici\u00f3n actual.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html><br>&lt;html lang=\"es\"><br>  &lt;head><br>    &lt;style><br>      div {<br>        width: 300px;<br>        height: 100px;<br>        background-color: yellow;<br>        border: 1px solid black;<br>        transform: translate(50px, 100px);<br>      }<br>    &lt;\/style><br>  &lt;\/head><br>  &lt;body><br>    &lt;h1>El m\u00e9todo translate()&lt;\/h1><br>    &lt;div><br>      El elemento div ser\u00e1 movido 50px hacia la derecha y 100 hacia abajo de su<br>      posici\u00f3n actual<br>    &lt;\/div><br>  &lt;\/body><br>&lt;\/html><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">El m\u00e9todo rotate()<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">El m\u00e9todo rotate() gira un elemento en sentido horario o antihorario seg\u00fan un grado determinado. El siguiente ejemplo gira el elemento <strong><em>&lt;div&gt;<\/em><\/strong> en el sentido de las agujas del reloj 20 grados.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html><br>&lt;html><br>  &lt;head><br>    &lt;style><br>      div {<br>        width: 300px;<br>        height: 100px;<br>        background-color: yellow;<br>        border: 1px solid black;<br>      }<br><br>      div#myDiv {<br>        transform: rotate(20deg);<br>      }<br>    &lt;\/style><br>  &lt;\/head><br>  &lt;body><br>    &lt;h1>The rotate() Method&lt;\/h1><br><br>    &lt;p><br>      The rotate() method rotates an element clockwise or counter-clockwise.<br>    &lt;\/p><br><br>    &lt;div>This a normal div element.&lt;\/div><br><br>    &lt;div id=\"myDiv\">This div element is rotated clockwise 20 degrees.&lt;\/div><br>  &lt;\/body><br>&lt;\/html><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">El m\u00e9todo scale()<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">El m\u00e9todo <strong><em>scale()<\/em><\/strong> aumenta o disminuye el tama\u00f1o de un elemento (seg\u00fan los par\u00e1metros dados para el ancho y alto). El siguiente ejemplo aumenta el elemento <strong><em>&lt;div&gt;<\/em><\/strong> para que sea dos veces su ancho original y tres veces su altura original.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html><br>&lt;html><br>  &lt;head><br>    &lt;style><br>      div {<br>        margin: 150px;<br>        width: 200px;<br>        height: 100px;<br>        background-color: yellow;<br>        border: 1px solid black;<br>        transform: scale(2, 3);<br>      }<br>    &lt;\/style><br>  &lt;\/head><br>  &lt;body><br>    &lt;h1>El m\u00e9todo scale()&lt;\/h1><br><br>    &lt;p>El m\u00e9todo scale() incrementa o decrementa el tama\u00f1o de un elemento.&lt;\/p><br><br>    &lt;div><br>      Este elemento div es dos veces su ancho original y tres veces su altura<br>      original.<br>    &lt;\/div><br>  &lt;\/body><br>&lt;\/html><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">scaleX()<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">El m\u00e9todo <strong><em>scaleX()<\/em><\/strong> incrementa o decrementa el ancho de un elemento.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">div&nbsp;{\n&nbsp; transform:&nbsp;scaleX(2);\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">scaleY()<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">El m\u00e9todo <strong><em>scaleY()<\/em><\/strong> incrementa o decrementa el alto de un elemento.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">div&nbsp;{<br>transform:&nbsp;scaleY(3);<br>}<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El siguiente ejemplo reduce el elemento <strong><em>&lt;div&gt;<\/em><\/strong> a la mitad de su altura original:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">div&nbsp;{\n&nbsp; transform:&nbsp;scaleY(0.5);\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">skewX()<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">El m\u00e9todo <strong><em>skewX()<\/em><\/strong> sesga un elemento a lo largo del eje X en el \u00e1ngulo dado. El siguiente ejemplo sesga el elemento <strong><em>&lt;div&gt;<\/em><\/strong> 20 grados a lo largo del eje X.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">div&nbsp;{\n&nbsp; transform:&nbsp;skewX(20deg);\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">skewY()<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">El m\u00e9todo <strong><em>skewY()<\/em><\/strong> sesga un elemento a lo largo del eje Y en el \u00e1ngulo dado. El siguiente ejemplo sesga el elemento <strong><em>&lt;div&gt;<\/em><\/strong> 20 grados a lo largo del eje Y.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">div&nbsp;{\n&nbsp; transform:&nbsp;skewY(20deg);\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">skew()<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">El m\u00e9todo <strong><em>skew()<\/em><\/strong> sesga un elemento a lo largo de los ejes X e Y en los \u00e1ngulos dados. El siguiente ejemplo sesga el elemento <strong><em>&lt;div&gt;<\/em><\/strong> 20 grados a lo largo del eje X y 10 grados a lo largo del eje Y.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">div&nbsp;{\n&nbsp; transform:&nbsp;skew(20deg, 10deg);\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Si no se especifica el segundo par\u00e1metro, tiene valor cero. Entonces, el siguiente ejemplo sesga el elemento <strong><em>&lt;div&gt;<\/em><\/strong> 20 grados a lo largo del eje X.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">div&nbsp;{\n&nbsp; transform:&nbsp;skew(20deg);\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">matrix()<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">El m\u00e9todo <strong><em>matrix()<\/em><\/strong> combina todos los m\u00e9todos de transformaci\u00f3n 2D en uno. Toma seis par\u00e1metros, que contienen funciones matem\u00e1ticas, que le permiten rotar, escalar, mover (traducir) y sesgar elementos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Los par\u00e1metros son los siguientes: <strong><em>matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())<\/em><\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">div&nbsp;{\n&nbsp; transform:&nbsp;matrix(1, -0.3, 0, 1, 0, 0);\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Las transformaciones CSS te permiten mover, rotar, escalar y sesgar elementos. En este cap\u00edtulo estudiaremos acerca de la siguiente propiedad:<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1367,"menu_order":9,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1406","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Las transformaciones CSS te permiten mover, rotar, escalar y sesgar elementos. En este cap\u00edtulo estudiaremos acerca de la siguiente propiedad:","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1406","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1406"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1406\/revisions"}],"predecessor-version":[{"id":1408,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1406\/revisions\/1408"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1367"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1406"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}