Jekyll2024-03-28T13:45:11+00:00https://recursivos.com/feed.xmlRecursivosCSS: Capas2024-03-19T00:00:00+00:002024-03-19T00:00:00+00:00https://recursivos.com/css/capas<p>Cuando se trabaja con hojas de estilos muy extensas puede ser necesario agrupar el código en diferentes capas con el fin de tener un mayor control de la especificidad. CSS provee la <a href="/css/reglas-arroba/">regla arroba</a> <code class="highlighter-rouge">@layer</code>, que permite crear <strong>capas de cascada</strong> que, como su nombre indica, tienen su propia cascada y su propia lógica.</p> <p>La agrupación de reglas CSS en capas específicas ayuda a resolver los conflictos de especificidad que suelen aparecer en proyectos grandes. Esto es posible gracias a que se puede crear tantas capas como sea necesario y se pueden ordenar de forma personalizada. Así se puede sobreescribir estilos con facilidad.</p> <p>Ventajas de usar capas:</p> <ul> <li>Organizar código en módulos</li> <li>Sobreescribir estilos CSS</li> <li>Evitar conflictos de especificidad</li> </ul> <p>Por tanto, en una hoja de estilos CSS puede haber <strong>múltiples capas</strong> que estructuren de forma diferente la <a href="/css/cascada/#especificidad">especificidad</a> de las reglas CSS, añadiendo un nuevo orden de precedencia de los selectores. Las capas funcionan de forma similar a la que podemos encontrar en cualquier herramienta de diseño gráfico.</p> <p>La <strong>sintaxis</strong> de esta regla arroba es muy sencilla: se usa el símbolo <code class="highlighter-rouge">@</code> (arroba) y la palabra clave que la define; por tanto: <code class="highlighter-rouge">@layer</code>. Le sigue un nombre o una lista de nombres de capas, exceptuando las que sean anónimas.</p> <p>Vamos a ver un pequeño ejemplo en el que creamos dos capas para añadir código CSS. En una se aplica un reinicio de estilos y en la otra se especifica algunos colores de base que definen el aspecto básico de una página web.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">@layer</span> <span class="n">reinicio</span> <span class="p">{</span> <span class="nt">html</span><span class="o">,</span> <span class="nt">body</span><span class="o">,</span> <span class="nt">div</span> <span class="p">{</span> <span class="nl">direction</span><span class="p">:</span> <span class="nb">ltr</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> <span class="k">@layer</span> <span class="n">base</span> <span class="p">{</span> <span class="nt">html</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">#eee</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="nx">black</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> </code></pre></div></div> <p class="notice-info">Tal y como se puede ver en este ejemplo, las dos capas tienen los nombres <code class="highlighter-rouge">reinicio</code> y <code class="highlighter-rouge">base</code>, cada una con sus reglas CSS.</p> <p>Si hubiese reglas CSS con la misma especificidad en las dos capas, los valores de la última capa anulan los valores de la anterior. La razón de esto es que no se ha indicado ningún orden determinado para las capas creadas.</p> <h2 id="ordenar-capas">Ordenar capas</h2> <p>Cuando las capas ya están creadas, el paso lógico que sigue es ordenarlas. Si no se ordenan, el orden de aparición determina la relevancia de las reglas CSS que contienen. La última capa tiene mayor relevancia, por lo tanto sobreescribirá la capa anterior en caso de que haya declaraciones iguales.</p> <p>Para ordenar capas de cascada debe utilizarse nuevamente la regla <code class="highlighter-rouge">@layer</code>. Pero en este caso, en vez de usarla para introducir reglas CSS dentro de ella, se usa para indicar un nombre o una lista de nombres de capas. Para que funcione, <strong>hay que declarar el orden de las capas antes de crearlas</strong>.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">/* Ejemplo 1 */</span> <span class="k">@layer</span> <span class="n">reinicio</span><span class="p">,</span> <span class="n">base</span><span class="p">;</span> <span class="c">/* Ejemplo 2 */</span> <span class="k">@layer</span> <span class="n">base</span><span class="p">,</span> <span class="n">reinicio</span><span class="p">;</span> <span class="c">/* Ejemplo 3 */</span> <span class="k">@layer</span> <span class="n">base</span><span class="p">,</span> <span class="n">plantilla</span><span class="p">,</span> <span class="n">botones</span><span class="p">;</span> </code></pre></div></div> <p>Así, alterando el orden de las capas podremos cambiar de una sola vez la especificidad de todas las reglas CSS que contienen. Dentro de cada capa, la especificidad funciona de forma normal, según el valor del selector.</p> <h2 id="capas-anónimas">Capas anónimas</h2> <p>Con <code class="highlighter-rouge">@layer</code> es posible crear capas que no tengan nombre, llamadas capas anónimas. Su orden de precedencia depende de su ubicación respecto al resto de las capas que hayamos creado, con y sin nombre. Los estilos declarados fuera de capa también pueden sobreescribir las capas anónimas.</p> <p>Veamos un ejemplo de código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">@layer</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="nx">darkblue</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p>Hay que tener en cuenta que no se puede asignar reglas CSS a una capa anónima concreta, y de hecho, las reglas de todas las capas anónimas se fusionarán en una única capa. Por tanto, no será posible hacer referencia a ninguna capa anónima cuando se necesite modificar su orden de precedencia.</p> <h2 id="fusión-de-capas">Fusión de capas</h2> <p>En el caso de crear varias capas con el mismo nombre, las reglas CSS contenidas serán tratadas como si estuvieran en la misma capa. Lo que determinará el resultado será la especificidad y el orden en el que se encuentren.</p> <p class="notice-info">De hecho, la creación de capas con un nombre que ya existe es la forma de añadir nuevas reglas CSS a las capas existentes.</p> <p>De igual manera, en relación con todas las reglas CSS que estén dentro de capas anónimas o fuera de las capas, el resultado se determinará a partir de la especificidad de sus selectores y de su ubicación en el código.</p> <h2 id="anidación-de-capas">Anidación de capas</h2> <p>Otra característica de las capas CSS es que se pueden anidar, por lo que constituyen una herramienta con una gran flexibilidad a la hora de controlar la especificidad. La anidación de capas es un proceso muy sencillo: tan solo hay que crear una nueva capa mientras estamos dentro de otra capa.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">@layer</span> <span class="n">primera</span> <span class="p">{</span> <span class="k">@layer</span> <span class="n">segunda</span> <span class="p">{</span> <span class="k">@layer</span> <span class="n">tercera</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="nx">red</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> </code></pre></div></div> <p>Existe otra forma todavía más sencilla de anidar capas y que puede ser útil en algunos casos concretos. Se trata de separar los nombres de las capas con un punto (<code class="highlighter-rouge">.</code>) al momento de crearlas. De esta manera:</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">@layer</span> <span class="n">primera</span><span class="p">.</span><span class="n">segunda</span><span class="p">.</span><span class="n">tercera</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="nx">red</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p>De esta manera se está indicando que la capa «tercera» está dentro de la «segunda», y que esta última está dentro de la «primera».</p> <h2 id="importar-código-en-una-capa">Importar código en una capa</h2> <p>Todavía puede irse un paso más allá con el uso de capas. Utilizando la regla arroba <code class="highlighter-rouge">@import</code> para enlazar un archivo CSS e incluir su código en nuestra hoja de estilos, es posible indicar que se añade en una capa CSS específica.</p> <p>Vamos a ver un ejemplo de código CSS en el que importamos un archivo llamado <code class="highlighter-rouge">capa.css</code> y lo vinculamos con una capa que se llamará «nueva-capa».</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">@import</span> <span class="s1">"capa.css"</span> <span class="n">layer</span><span class="p">(</span><span class="n">nueva-capa</span><span class="p">);</span> </code></pre></div></div> <p>Esta combinación de dos reglas arroba constituye un buen sistema para separar las capas en diferentes archivos CSS, haciendo que, en algunos casos, el código sea mucho más fácil de mantener.</p> <h2 id="fuera-de-las-capas">Fuera de las capas</h2> <p>Todas las reglas CSS que no estén dentro de una capa, de forma automática se colocarán en un espacio único exterior. Estas reglas se leerán después de todas las capas que hayamos definido con la regla arroba <code class="highlighter-rouge">@layer</code>, por lo que las reglas CSS del exterior anulan los estilos declarados en las capas.</p> <p>Esto es así porque las capas tienen una menor relevancia que los estilos declarados fuera de ellas. No importa el orden, por lo que esto sucederá aunque los estilos de fuera de las capas estén declarados antes que las capas. Los estilos de fuera de las capas son interpretados como si fueran parte de una última capa final.</p> <h2 id="las-declaraciones-importantes">Las declaraciones importantes</h2> <p>¿Qué ocurre cuando en una capa en concreto se usa la expresión <code class="highlighter-rouge">!important</code>? Esta expresión sirve para dar mayor importancia a las declaraciones, anulando o sobreescribiendo a las demás, y también tiene efecto cuando se trabaja con capas de cascada. Por tanto, hay que tenerla en cuenta.</p> <p>Si se usa la expresión <code class="highlighter-rouge">!important</code> en una propiedad CSS de una capa que tenga menor relevancia, prevalecerá por encima de las capas de mayor relevancia o declaradas más adelante. Es decir, que <code class="highlighter-rouge">!important</code> anulará el comportamiento de la especificidad agrupada en capas descrito en este artículo.</p> <p>Por ejemplo, si en una primera capa que es la menos relevante añadimos la expresión <code class="highlighter-rouge">!important</code>, la regla CSS que la contenga anulará el valor de reglas contenidas en capas posteriores.</p>RecursivosCuando se trabaja con hojas de estilos muy extensas puede ser necesario agrupar el código en diferentes capas con el fin de tener un mayor control de la especificidad. CSS provee la regla arroba @layer, que permite crear capas de cascada que, como su nombre indica, tienen su propia cascada y su propia lógica.CSS: Animaciones2024-03-09T00:00:00+00:002024-03-09T00:00:00+00:00https://recursivos.com/css/animaciones<p>Las <strong>animaciones</strong> CSS permiten crear efectos de movimiento entre dos estilos diferentes de un elemento HTML, pasando por distintas fases intermedias, y sin necesidad de usar JavaScript. Además, se pueden iniciar sin que el usuario realice una acción concreta. Por tanto, son más potentes que las <a href="/css/transiciones/">transiciones</a>.</p> <p>La principal ventaja de las animaciones frente a las transiciones es que usan <strong>fotogramas</strong> (<em>keyframes</em>) para indicar el estado inicial, el estado final y los puntos intermedios necesarios para obtener la <strong>secuencia</strong> deseada. Además, las animaciones son fáciles de usar, incluso sin conocer JavaScript.</p> <p>Otra importante ventaja de usar animaciones es que se muestran correctamente en cualquier equipo, incluso en ordenadores poco potentes. El navegador web controla la secuencia de animación, optimizando el rendimiento de la misma.</p> <p>Las animaciones están compuestas por dos componentes: las propiedades CSS que permiten describir la animación en los elementos HTML, y una secuencia de fotogramas definidos con la regla arroba <a href="/css/animaciones/#keyframes">@keyframes</a>.</p> <p>Propiedades descritas en este artículo:</p> <table> <thead> <tr> <th style="text-align: left">Propiedad</th> <th style="text-align: left">Descripción</th> </tr> </thead> <tbody> <tr> <td style="text-align: left"><code><a href="/css/animaciones/#animation-name" title="La propiedad 'animation-name'">animation-name</a></code></td> <td style="text-align: left">Indica el nombre de la animación.</td> </tr> <tr> <td style="text-align: left"><code><a href="/css/animaciones/#animation-duration" title="La propiedad 'animation-duration'">animation-duration</a></code></td> <td style="text-align: left">Indica la duración de la animación.</td> </tr> <tr> <td style="text-align: left"><code><a href="/css/animaciones/#animation-timing-function" title="La propiedad 'animation-function'">animation-timing-function</a></code></td> <td style="text-align: left">Indica la función de animación.</td> </tr> <tr> <td style="text-align: left"><code><a href="/css/animaciones/#animation-delay" title="La propiedad 'animation-delay'">animation-delay</a></code></td> <td style="text-align: left">Indica el tiempo de espera.</td> </tr> <tr> <td style="text-align: left"><code><a href="/css/animaciones/#animation-iteration-count" title="La propiedad 'animation-iteration-count'">animation-iteration-count</a></code></td> <td style="text-align: left">Indica las veces que se repetirá.</td> </tr> <tr> <td style="text-align: left"><code><a href="/css/animaciones/#animation-direction" title="La propiedad 'animation-direction'">animation-direction</a></code></td> <td style="text-align: left">Indica la dirección de la animación.</td> </tr> <tr> <td style="text-align: left"><code><a href="/css/animaciones/#animation-fill-mode" title="La propiedad 'animation-fill-mode'">animation-fill-mode</a></code></td> <td style="text-align: left">Controla la aplicación de estilos.</td> </tr> <tr> <td style="text-align: left"><code><a href="/css/animaciones/#animation-play-state" title="La propiedad 'animation-play-state'">animation-play-state</a></code></td> <td style="text-align: left">Indica el estado de la animación.</td> </tr> <tr> <td style="text-align: left"><code><a href="/css/animaciones/#animation-composition" title="La propiedad 'animation-composition'">animation-composition</a></code></td> <td style="text-align: left">Mezcla varias animaciones.</td> </tr> <tr> <td style="text-align: left"><code><a href="/css/animaciones/#animation" title="La propiedad 'animation'">animation</a></code></td> <td style="text-align: left">Abreviatura de todas las anteriores.</td> </tr> </tbody> </table> <p>Antes de conocer cada una de estas propiedades CSS, vamos a ver un ejemplo llamado “muestra” en el que un rectángulo naranja se desplaza a la derecha, se deforma hacia un lado, cambia de color, se deforma hacia el otro lado, cambia de color otra vez y luego recupera su aspecto original mientras regresa.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.rectangulo</span> <span class="p">{</span> <span class="nl">animation</span><span class="p">:</span> <span class="n">muestra</span> <span class="m">4s</span> <span class="nb">infinite</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">30px</span><span class="p">;</span> <span class="nl">position</span><span class="p">:</span> <span class="nb">relative</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">80px</span><span class="p">;</span> <span class="p">}</span> <span class="k">@keyframes</span> <span class="n">muestra</span> <span class="p">{</span> <span class="m">0%</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">#ff7f2a</span><span class="p">;</span> <span class="nl">left</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span> <span class="m">33%</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">teal</span><span class="p">;</span> <span class="nl">left</span><span class="p">:</span> <span class="m">30px</span><span class="p">;</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">skewX</span><span class="p">(</span><span class="m">-35deg</span><span class="p">);</span> <span class="p">}</span> <span class="m">67%</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">mediumpurple</span><span class="p">;</span> <span class="nl">left</span><span class="p">:</span> <span class="m">30px</span><span class="p">;</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">skewX</span><span class="p">(</span><span class="m">35deg</span><span class="p">);</span> <span class="p">}</span> <span class="m">100%</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">#ff7f2a</span><span class="p">;</span> <span class="nl">left</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">skewX</span><span class="p">(</span><span class="m">0</span><span class="p">);</span> <span class="p">}</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .rectangulo { animation: muestra 4s infinite; height: 30px; position: relative; width: 80px; } @keyframes muestra { 0% { background: #ff7f2a; left: 0; } 33% { background: teal; left: 30px; transform: skewX(-35deg); } 67% { background: mediumpurple; left: 30px; transform: skewX(35deg); } 100% { background: #ff7f2a; left: 0; transform: skewX(0); } } </style> <blockquote> <div class="rectangulo"></div> </blockquote> <h2 id="keyframes">La regla arroba ‘@keyframes’</h2> <p>Una animación está formada por una cierta cantidad de <strong>fotogramas</strong>, que mostrados secuencialmente uno detrás de otro, generan el efecto óptico de movimiento. Así es como se forma una animación, tanto en el cine como en Internet.</p> <p>Cuando trabajamos con CSS, los fotogramas se forman durante el cambio entre dos estilos de un elemento. Con las propiedades CSS se define un fotograma inicial, fotogramas intermedios y un estado final. La regla arroba <code class="highlighter-rouge">@keyframes</code> permite definir estos <strong>fotogramas clave</strong> que darán forma a la animación.</p> <p>Cuando la animación comience a reproducirse, el navegador web será el encarado de que se generen todos los fotogramas restantes necesarios para que la animación se reproduzca de forma suave y sin saltos bruscos.</p> <p>Esta es la sintaxis de <code class="highlighter-rouge">@keyframes</code>:</p> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>@keyframes identificador { selector-tiempo { propiedad: valor; propiedad: valor; } } </code></pre></div></div> <p>Por ejemplo:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">@keyframes</span> <span class="n">nombre</span> <span class="p">{</span> <span class="m">0%</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">red</span><span class="p">;</span> <span class="p">}</span> <span class="m">50%</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">green</span><span class="p">;</span> <span class="p">}</span> <span class="m">100%</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">blue</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> </code></pre></div></div> <p>El <strong>identificador</strong> será el nombre que identifica la animación. Este nombre es el que luego se usará en las propiedades CSS <code class="highlighter-rouge">animation-name</code> o <code class="highlighter-rouge">animation</code> para indicar el elemento HTML que debe animarse.</p> <p>El <strong>selector de tiempo</strong> puede ser un valor numérico en porcentaje. También puede usarse las palabras clave <code class="highlighter-rouge">from</code> y <code class="highlighter-rouge">to</code>, para indicar un desplazamiento inicial de 0% o un desplazamiento final de 100%.</p> <p>En el ejemplo siguiente, la animación indica un cambio de color de fondo. En el primer fotograma, el color de fondo es el rojo (<code class="highlighter-rouge">red</code>), mientras que en el segundo fotograma es el rojo oscuro (<code class="highlighter-rouge">darkred</code>).</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">@keyframes</span> <span class="n">oscurece</span> <span class="p">{</span> <span class="nt">from</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">red</span><span class="p">;</span> <span class="p">}</span> <span class="nt">to</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">darkred</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> </code></pre></div></div> <p>En este otro ejemplo, hacemos que un objeto se desplace de izquierda a derecha. En el primer fotograma, el objeto se encuentra a la izquierda, mientras que en el segundo fotograma se encuentra a la derecha.</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">@keyframes</span> <span class="n">mueve</span> <span class="p">{</span> <span class="nt">from</span> <span class="p">{</span> <span class="nl">left</span><span class="p">:</span> <span class="m">0%</span><span class="p">;</span> <span class="p">}</span> <span class="nt">to</span> <span class="p">{</span> <span class="nl">left</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> </code></pre></div></div> <p>No obstante, usar <code class="highlighter-rouge">@keyframes</code> no es suficiente para que la animación que hemos definido se reproduzca. El nombre de la animación debe asociarse a uno o varios elementos HTML. También debe indicarse la duración de la animación, y de forma opcional, puede indicarse otras configuraciones. A continuación se describen las propiedades CSS para configurar la reproducción de la animación.</p> <h2 id="animation-name">La propiedad ‘animation-name’</h2> <p>La propiedad <code class="highlighter-rouge">animation-name</code> permite especificar el nombre de la animación que se aplicará al elemento seleccionado. El nombre debe ser el mismo que el identificador utilizado en la regla arroba <code class="highlighter-rouge">@keyframes</code>.</p> <p>Las animaciones pueden ser múltiples, por lo que es posible indicar varios nombres separados mediante una coma. Si el nombre (identificador) especificado no coincide con el de ninguna <code class="highlighter-rouge">@keyframe</code>, no se aplicará ninguna animación.</p> <p>El valor por defecto es la palabra clave <code class="highlighter-rouge">none</code>, que además se puede usar para desactivar una animación sin alterar el orden de los demás identificadores, o para desactivar animaciones en un momento dado.</p> <p>El nombre que identifica la animación puede estar en mayúsculas o minúsculas, de la “a” a la “z”, pueden contener números del “0” al “9”, guiones bajos (“_”) y guiones medios (“-“). El primer carácter debe ser una letra.</p> <p>Ejemplos de uso de <code class="highlighter-rouge">animation-name</code>:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.ejemplo</span> <span class="p">{</span> <span class="nl">animation-name</span><span class="p">:</span> <span class="n">mi-secuencia</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.ejemplo</span> <span class="p">{</span> <span class="nl">animation-name</span><span class="p">:</span> <span class="n">Mueve1</span><span class="p">,</span> <span class="n">Mueve2</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.ejemplo</span> <span class="p">{</span> <span class="nl">animation-name</span><span class="p">:</span> <span class="n">uno</span><span class="p">,</span> <span class="n">dos</span><span class="p">,</span> <span class="n">tres</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.ejemplo</span> <span class="p">{</span> <span class="nl">animation-name</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <h2 id="animation-duration">La propiedad ‘animation-duration’</h2> <p>La propiedad <code class="highlighter-rouge">animation-duration</code> permite indicar la duración de la animación, es decir, el tiempo que tarda en completar un ciclo. Puede indicarse una lista de tiempos, separados por una coma.</p> <p>Los valores de esta propiedad serán en unidades de tiempo, pudiendo usar segundos (<code class="highlighter-rouge">s</code>) o milisegundos (<code class="highlighter-rouge">ms</code>). Por defecto, el valor es de <code class="highlighter-rouge">0s</code>. No se permite usar valores en negativo, por tanto deberán ser positivos.</p> <p>Ejemplos de uso de <code class="highlighter-rouge">animation-duration</code>:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.ejemplo</span> <span class="p">{</span> <span class="nl">animation-duration</span><span class="p">:</span> <span class="m">2s</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.ejemplo</span> <span class="p">{</span> <span class="nl">animation-duration</span><span class="p">:</span> <span class="m">0.5s</span><span class="p">,</span> <span class="m">0.25s</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.ejemplo</span> <span class="p">{</span> <span class="nl">animation-duration</span><span class="p">:</span> <span class="m">10ms</span><span class="p">,</span> <span class="m">20ms</span><span class="p">,</span> <span class="m">30ms</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.ejemplo</span> <span class="p">{</span> <span class="nl">animation-duration</span><span class="p">:</span> <span class="m">0s</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p>A continuación veremos unos objetos que se desplazan de izquierda a derecha, pero con distintas velocidades. El primero tarda 6 segundos, el segundo tarda 4 segundos y el tercero solo 2 segundos.</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.lento</span> <span class="p">{</span> <span class="nl">animation-duration</span><span class="p">:</span> <span class="m">6s</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.normal</span> <span class="p">{</span> <span class="nl">animation-duration</span><span class="p">:</span> <span class="m">4s</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.rapido</span> <span class="p">{</span> <span class="nl">animation-duration</span><span class="p">:</span> <span class="m">2s</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> @keyframes mueve { from { left: 0%; } to { left: calc(100% - 85px); } } .objeto { background: #ff7f2a; position: relative; width: 85px; } .texto { color: #000; font-size: 0.875em; line-height: 30px; padding-left: 5px; } .lento { animation: mueve 6s linear infinite alternate } .normal { animation: mueve 4s linear infinite alternate } .rapido { animation: mueve 2s linear infinite alternate } blockquote:active .lento, blockquote:active .normal, blockquote:active .rapido { animation-play-state: paused; } </style> <blockquote> <p class="objeto texto lento"><em>lento</em></p> <p class="objeto texto normal"><em>normal</em></p> <p class="objeto texto rapido"><em>rápido</em></p> </blockquote> <p class="notice-info">El único valor que cambia entre estos objetos que se encuentran en movimiento es la duración. Presiona encima para poner la pausa.</p> <h2 id="animation-timing-function">La propiedad ‘animation-timing-function’</h2> <p>La propiedad <code class="highlighter-rouge">animation-timing-function</code> permite especificar la función que se usará en la animación. Así se puede definir la aceleración o desaceleración de los pasos intermedios, como si fuera una función matemática.</p> <p>Existe una serie de palabras clave que definen las principales funciones de velocidad. Por ejemplo, para indicar una velocidad constante (sin aceleración) se usa la palabra clave <code class="highlighter-rouge">linear</code>. En cambio, para indicar una velocidad lenta que acelere al final se usa la palabra clave <code class="highlighter-rouge">ease-in</code>.</p> <p>A continuación se exponen las funciones predefinidas que CSS provee para modificar la velocidad de la animación:</p> <table> <thead> <tr> <th style="text-align: left">Valor</th> <th style="text-align: left">Inicio</th> <th style="text-align: left">Medio</th> <th style="text-align: left">Final</th> </tr> </thead> <tbody> <tr> <td style="text-align: left"><code class="highlighter-rouge">ease</code></td> <td style="text-align: left">Lento</td> <td style="text-align: left">Rápido</td> <td style="text-align: left">Lento</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">linear</code></td> <td style="text-align: left">Normal</td> <td style="text-align: left">Normal</td> <td style="text-align: left">Normal</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">ease-in</code></td> <td style="text-align: left">Lento</td> <td style="text-align: left">Normal</td> <td style="text-align: left">Normal</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">ease-out</code></td> <td style="text-align: left">Normal</td> <td style="text-align: left">Normal</td> <td style="text-align: left">Lento</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">ease-in-out</code></td> <td style="text-align: left">Lento</td> <td style="text-align: left">Normal</td> <td style="text-align: left">Lento</td> </tr> </tbody> </table> <p>Por defecto se usa la función <code class="highlighter-rouge">ease</code>, con la que la animación empieza lentamente, luego acelera y al final frena, terminando lentamente otra vez. Se trata de una función simétrica: lenta en los extremos y rápida al centro.</p> <p>Vamos a visualizar varios ejemplos a la vez para comprender mejor la diferencia que se produce al animar un elemento usando cada una de las funciones mencionadas. Creamos algunos objetos que irán de un lado al otro.</p> <p>El código es el siguiente:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.ease</span> <span class="p">{</span> <span class="nl">animation-timing-function</span><span class="p">:</span> <span class="nb">ease</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.linear</span> <span class="p">{</span> <span class="nl">animation-timing-function</span><span class="p">:</span> <span class="nb">linear</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.ease-in</span> <span class="p">{</span> <span class="nl">animation-timing-function</span><span class="p">:</span> <span class="nb">ease-in</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.ease-out</span> <span class="p">{</span> <span class="nl">animation-timing-function</span><span class="p">:</span> <span class="nb">ease-out</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.ease-in-out</span> <span class="p">{</span> <span class="nl">animation-timing-function</span><span class="p">:</span> <span class="nb">ease-in-out</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado</p> <style> .ease { animation: mueve 3s infinite alternate } .linear { animation: mueve 3s linear infinite alternate } .ease-in { animation: mueve 3s ease-in infinite alternate } .ease-out { animation: mueve 3s ease-out infinite alternate } .ease-in-out { animation: mueve 3s ease-in-out infinite alternate } blockquote:active .ease, blockquote:active .linear, blockquote:active .ease-in, blockquote:active .ease-out, blockquote:active .ease-in-out { animation-play-state: paused; } </style> <blockquote> <p class="objeto texto ease"><em>ease</em></p> <p class="objeto texto linear"><em>linear</em></p> <p class="objeto texto ease-in"><em>ease-in</em></p> <p class="objeto texto ease-out"><em>ease-out</em></p> <p class="objeto texto ease-in-out"><em>ease-in-out</em></p> </blockquote> <p class="notice-info">En esta ocasión, se puede observar que los 5 objetos llegan al mismo tiempo, en 3 segundos (<code class="highlighter-rouge">3s</code>), aunque aparentemente no lo parezca. Presiona sobre ellos para que se queden pausados.</p> <h3 id="la-función-cubic-bezier">La función ‘cubic-bezier()’</h3> <p>Mediante la función <code class="highlighter-rouge">cubic-bezier()</code> se puede crear una función de aceleración personalizada. Esto se consigue a partir de la descripción de dos puntos de control indicados mediante dos coordenadas para cada uno. Por tanto, tendremos cuatro coordenadas: dos para el primer punto y dos para el segundo.</p> <table> <thead> <tr> <th style="text-align: left">Puntos</th> <th style="text-align: left">Significado</th> </tr> </thead> <tbody> <tr> <td style="text-align: left"><code class="highlighter-rouge">x1</code></td> <td style="text-align: left">Coordenada X del primer punto de control.</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">y1</code></td> <td style="text-align: left">Coordenada Y del primer punto de control.</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">x2</code></td> <td style="text-align: left">Coordenada X del segundo punto de control.</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">y2</code></td> <td style="text-align: left">Coordenada Y del segundo punto de control.</td> </tr> </tbody> </table> <p>Esta es la sintaxis de la función <code class="highlighter-rouge">cubic-bezier()</code>:</p> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>cubic-bezier(x1, y1, x2, y2); </code></pre></div></div> <p>Por ejemplo:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.ejemplo</span> <span class="p">{</span> <span class="nl">animation-timing-function</span><span class="p">:</span> <span class="nf">cubic-bezier</span><span class="p">(</span><span class="m">0.8</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0.2</span><span class="p">,</span> <span class="m">1</span><span class="p">);</span> <span class="p">}</span> </code></pre></div></div> <p>Tal y como se puede observar en el ejemplo anterior, los valores serán numéricos, admitiendo decimales; pueden ser positivos o negativos.</p> <p>A continuación se crea dos nuevos objetos que se desplazan de izquierda a derecha, usando dos funciones personalizadas mediante la función <code class="highlighter-rouge">cubic-bezier()</code>. Los dos ejemplos son ligeramente diferentes.</p> <p>Código CSS</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.cubic1</span> <span class="p">{</span> <span class="nl">animation-timing-function</span><span class="p">:</span> <span class="nf">cubic-bezier</span><span class="p">(</span><span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0.4</span><span class="p">);</span> <span class="p">}</span> <span class="nc">.cubic2</span> <span class="p">{</span> <span class="nl">animation-timing-function</span><span class="p">:</span> <span class="nf">cubic-bezier</span><span class="p">(</span><span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0.4</span><span class="p">,</span> <span class="m">0</span><span class="p">);</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .cubic1 { animation: mueve 3s infinite alternate cubic-bezier(0,0,0,0.4) } .cubic2 { animation: mueve 3s infinite alternate cubic-bezier(0,0,0.4,0) } blockquote:active .cubic1, blockquote:active .cubic2 { animation-play-state: paused; } </style> <blockquote> <p class="objeto texto cubic1"><em>Objeto 1</em></p> <p class="objeto texto cubic2"><em>Objeto 2</em></p> </blockquote> <p class="notice-info">La aceleración de los dos objetos varía de forma distinta. Aparentemente, uno parece más rápido que el otro, pero ambos llegan a su destino en 3 segundos. Presiona sobre ellos para que se queden pausados.</p> <h3 id="la-función-steps">La función ‘steps()’</h3> <p>La función <code class="highlighter-rouge">steps()</code> permite crear otro tipo de animación en la que no se produce un cambio entre estados de forma suave y gradual, sino en saltos bruscos y de forma escalonada. Permite indicar el número de saltos deseados.</p> <p>Imaginemos que queremos realizar una animación producida en 5 pasos. El tiempo que dure la animación se dividirá entre 5, produciendo un salto en el momento del 20%, otro en el 40%, otro en el 60%, otro en el 80% y el último en el 100% del tiempo. Realizando 5 paradas desde el inicio hasta el final.</p> <p>En esta función puede indicarse un segundo parámetro opcional, que permite especificar si el salto brusco de la animación debe producirse al principio o al final de cada paso. La palabra clave <code class="highlighter-rouge">start</code> indica que el salto ocurre al principio de cada salto; y con la palabra clave <code class="highlighter-rouge">end</code> (por defecto) ocurre al final.</p> <p>Esta es la sintaxis de la función <code class="highlighter-rouge">steps()</code>:</p> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>steps(n, start|end); </code></pre></div></div> <p>Por ejemplo:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.ejemplo</span> <span class="p">{</span> <span class="nl">animation-timing-function</span><span class="p">:</span> <span class="nf">steps</span><span class="p">(</span><span class="m">5</span><span class="p">,</span> <span class="nb">end</span><span class="p">);</span> <span class="p">}</span> </code></pre></div></div> <p>Vamos a visualizar un nuevo ejemplo. Esta esta vez, comparando una función lineal (<code class="highlighter-rouge">linear</code>), que se desplaza suavemente, con la función <code class="highlighter-rouge">steps()</code>, que se desplaza realizando concretamente 10 saltos bruscos.</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.steps</span> <span class="p">{</span> <span class="nl">animation-timing-function</span><span class="p">:</span> <span class="nf">steps</span><span class="p">(</span><span class="m">10</span><span class="p">,</span> <span class="nb">start</span><span class="p">);</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .steps { animation: mueve 3s infinite alternate steps(10, start) } blockquote:active .steps { animation-play-state: paused; } </style> <blockquote> <p class="objeto texto linear"><em>linear</em></p> <p class="objeto texto steps"><em>steps</em></p> </blockquote> <p class="notice-info">Ambos objetos tienen una duración de 3 segundos, y solo les diferencia el hecho de que usan funciones de tiempo diferentes.</p> <h2 id="animation-delay">La propiedad ‘animation-delay’</h2> <p>La propiedad <code class="highlighter-rouge">animation-delay</code> permite especificar el tiempo de retraso que debe transcurrir antes de iniciar la animación deseada. Por tanto, con esta propiedad se retarda el inicio de la secuencia de animación.</p> <p>Para indicar que la animación comience de inmediato debe usarse el valor <code class="highlighter-rouge">0s</code> (0 segundos), que es además el valor por defecto. Si se indica el valor <code class="highlighter-rouge">2s</code> (2 segundos), la secuencia se iniciará después de 2 segundos.</p> <p>Esta propiedad admite valores negativos, con los que la animación se iniciará de inmediato, pero no desde el principio, sino a partir del punto indicado. Si se indica <code class="highlighter-rouge">-2s</code> (-2 segundos), la secuencia se iniciará de forma inmediata, pero a partir del fotograma correspondiente a los 2 segundos.</p> <p>Ejemplos de uso de <code class="highlighter-rouge">animation-delay</code>:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.ejemplo</span> <span class="p">{</span> <span class="nl">animation-delay</span><span class="p">:</span> <span class="m">3s</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.ejemplo</span> <span class="p">{</span> <span class="nl">animation-delay</span><span class="p">:</span> <span class="m">-1s</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.ejemplo</span> <span class="p">{</span> <span class="nl">animation-delay</span><span class="p">:</span> <span class="m">320ms</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <h2 id="animation-iteration-count">La propiedad ‘animation-iteration-count’</h2> <p>La propiedad <code class="highlighter-rouge">animation-iteration-count</code> permite especificar el número de veces que debe repetirse la animación. De esta manera, se puede establecer un número limitado o incluso decirle que se repita hasta el infinito.</p> <p>El valor por defecto es <code class="highlighter-rouge">1</code>, con el que la animación se produce una única vez y se detiene. No se permite valores negativos, como es lógico, pero sí que se puede indicar valores con decimales. Por ejemplo, <code class="highlighter-rouge">0.5</code> se realizará la mitad de la animación. Con el valor <code class="highlighter-rouge">infinite</code> se repetirá para siempre.</p> <p>Ejemplos de uso de <code class="highlighter-rouge">animation-iteration-count</code>:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.ejemplo</span> <span class="p">{</span> <span class="nl">animation-iteration-count</span><span class="p">:</span> <span class="m">3</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.ejemplo</span> <span class="p">{</span> <span class="nl">animation-iteration-count</span><span class="p">:</span> <span class="m">0.2</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.ejemplo</span> <span class="p">{</span> <span class="nl">animation-iteration-count</span><span class="p">:</span> <span class="nb">infinite</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <h2 id="animation-direction">La propiedad ‘animation-direction’</h2> <p>La propiedad <code class="highlighter-rouge">animation-direction</code> permite indicar la dirección de la animación, es decir, si tras finalizar la secuencia debe retroceder hasta el fotograma inicial o si debe comenzar desde el principio otra vez.</p> <p>Esta propiedad es realmente útil para lograr efectos de retorno de forma automática sin tener que indicarlo en la secuencia de animación del <code class="highlighter-rouge">@keyframe</code>. Por ejemplo, si movemos un elemento hacia la derecha y queremos animar su regreso, será tan sencillo como indicarlo a través de esta propiedad.</p> <p>Lista de valores posibles:</p> <table> <thead> <tr> <th style="text-align: left">Valor</th> <th style="text-align: left">Descripción</th> </tr> </thead> <tbody> <tr> <td style="text-align: left"><code class="highlighter-rouge">normal</code></td> <td style="text-align: left">La animación avanza en orden normal.</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">reverse</code></td> <td style="text-align: left">La animación avanza en orden inverso.</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">alternate</code></td> <td style="text-align: left">Inicia en orden normal y luego retrocede.</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">alternate-reverse</code></td> <td style="text-align: left">Inicia en orden inverso y luego en orden normal.</td> </tr> </tbody> </table> <p>Ejemplos de uso de <code class="highlighter-rouge">animation-direction</code>:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.ejemplo</span> <span class="p">{</span> <span class="nl">animation-direction</span><span class="p">:</span> <span class="nb">reverse</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.ejemplo</span> <span class="p">{</span> <span class="nl">animation-direction</span><span class="p">:</span> <span class="nb">alternate</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.ejemplo</span> <span class="p">{</span> <span class="nl">animation-direction</span><span class="p">:</span> <span class="nb">alternate-reverse</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <h2 id="animation-fill-mode">La propiedad ‘animation-fill-mode’</h2> <p>La propiedad <code class="highlighter-rouge">animation-fill-mode</code> permite indicar el modo en el que se aplicarán los estilos CSS al elemento, antes y después de que se produzca la animación. Por tanto, esta propiedad es útil para controlar el estado de los elementos antes de que se inicie la animación y después de que haya finalizado.</p> <p>Como opción por defecto de las animaciones, no aplican estilos antes de iniciar y después de finalizar. Esto puede verse en el hecho de que la apariencia de un elemento regresa a su estado inicial cuando la animación finaliza.</p> <p>Lista de valores posibles de la propiedad <code class="highlighter-rouge">animation-fill-mode</code> para indicar el comportamiento de la animación cuando no se reproduce:</p> <table> <thead> <tr> <th style="text-align: left">Valor</th> <th style="text-align: left">Descripción</th> </tr> </thead> <tbody> <tr> <td style="text-align: left"><code class="highlighter-rouge">none</code></td> <td style="text-align: left">No se aplica estilos antes y después.</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">backwards</code></td> <td style="text-align: left">Aplica estilos del fotograma inicial.</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">forwards</code></td> <td style="text-align: left">Aplica estilos del fotograma final.</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">both</code></td> <td style="text-align: left">Aplica estilos de los fotogramas inicial y final.</td> </tr> </tbody> </table> <p>Ejemplos de uso de <code class="highlighter-rouge">animation-fill-mode</code>:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.ejemplo</span> <span class="p">{</span> <span class="nl">animation-fill-mode</span><span class="p">:</span> <span class="nb">backwards</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.ejemplo</span> <span class="p">{</span> <span class="nl">animation-fill-mode</span><span class="p">:</span> <span class="nb">forwards</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.ejemplo</span> <span class="p">{</span> <span class="nl">animation-fill-mode</span><span class="p">:</span> <span class="nb">both</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <h2 id="animation-play-state">La propiedad ‘animation-play-state’</h2> <p>La propiedad <code class="highlighter-rouge">animation-play-state</code> permite indicar el estado de reproducción de una animación, es decir, si debe estar pausada o si debe estar reproduciéndose. Esta propiedad puede ser útil en CSS y en JavaScript. Por ejemplo, puede usarse con una <a href="/css/pseudoclases/">pseudoclase</a> (<code class="highlighter-rouge">:hover</code> o <code class="highlighter-rouge">:active</code>) para pausar o continuar.</p> <p>Esta propiedad puede tener dos valores:</p> <table> <thead> <tr> <th style="text-align: left">Valor</th> <th style="text-align: left">Descripción</th> </tr> </thead> <tbody> <tr> <td style="text-align: left"><code class="highlighter-rouge">running</code></td> <td style="text-align: left">La animación se reproduce. Por defecto.</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">paused</code></td> <td style="text-align: left">La animación se queda pausada.</td> </tr> </tbody> </table> <p>Ejemplos de uso de <code class="highlighter-rouge">animation-play-state</code>:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.ejemplo</span> <span class="p">{</span> <span class="nl">animation-play-state</span><span class="p">:</span> <span class="nb">running</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.ejemplo</span> <span class="p">{</span> <span class="nl">animation-play-state</span><span class="p">:</span> <span class="nb">paused</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <h2 id="animation-composition">La propiedad ‘animation-composition’</h2> <p>La propiedad <code class="highlighter-rouge">animation-composition</code> permite indicar al navegador la forma de aplicar las múltiples animaciones, en caso de que varias estén especificadas de forma encadenada. Por tanto, permite indicar cómo se mezclan. El valor por defecto es <code class="highlighter-rouge">replace</code>, en el que las animaciones se sobreescriben.</p> <p>Esta propiedad puede tener tres valores:</p> <table> <thead> <tr> <th style="text-align: left">Valor</th> <th style="text-align: left">Descripción</th> </tr> </thead> <tbody> <tr> <td style="text-align: left"><code class="highlighter-rouge">replace</code></td> <td style="text-align: left">Las animaciones se sobreescriben. Por defecto.</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">add</code></td> <td style="text-align: left">Las animaciones se añaden.</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">accumulate</code></td> <td style="text-align: left">Las animaciones se acumulan.</td> </tr> </tbody> </table> <p>Ejemplos de uso de <code class="highlighter-rouge">animation-composition</code>:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.ejemplo</span> <span class="p">{</span> <span class="nl">animation-composition</span><span class="p">:</span> <span class="nb">replace</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.ejemplo</span> <span class="p">{</span> <span class="nl">animation-composition</span><span class="p">:</span> <span class="nb">add</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.ejemplo</span> <span class="p">{</span> <span class="nl">animation-composition</span><span class="p">:</span> <span class="nb">accumulate</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <h2 id="animation">La propiedad ‘animation’</h2> <p>La propiedad <code class="highlighter-rouge">animation</code> es una abreviatura (<em>shorthand</em>) que unifica todas las anteriores. Los valores de cada una de las propiedades anteriores deben estar separados por un espacio. El orden debe ser el siguiente:</p> <ol> <li><code class="highlighter-rouge">animation-name</code></li> <li><code class="highlighter-rouge">animation-duration</code></li> <li><code class="highlighter-rouge">animation-timing-function</code></li> <li><code class="highlighter-rouge">animation-delay</code></li> <li><code class="highlighter-rouge">animation-iteration-count</code></li> <li><code class="highlighter-rouge">animation-direction</code></li> <li><code class="highlighter-rouge">animation-fill-mode</code></li> <li><code class="highlighter-rouge">animation-play-state</code></li> </ol> <p>Es importante no olvidar las unidades de las propiedades de tiempo: segundos (<code class="highlighter-rouge">s</code>) y milisegundos (<code class="highlighter-rouge">ms</code>). De lo contrario, se interpretará como el número de veces que debe repetirse la iteración de la animación.</p> <p>Por ejemplo:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.ejemplo</span> <span class="p">{</span> <span class="nl">animation</span><span class="p">:</span> <span class="n">mueve</span> <span class="m">6s</span> <span class="nb">infinite</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.ejemplo</span> <span class="p">{</span> <span class="nl">animation</span><span class="p">:</span> <span class="n">mueve</span> <span class="m">250ms</span> <span class="nb">linear</span> <span class="nb">alternate</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.ejemplo</span> <span class="p">{</span> <span class="nl">animation</span><span class="p">:</span> <span class="n">mueve</span> <span class="c">/* nombre */</span> <span class="m">0.4s</span> <span class="c">/* duración */</span> <span class="nb">linear</span> <span class="c">/* función */</span> <span class="m">100ms</span> <span class="c">/* retraso */</span> <span class="m">3</span> <span class="c">/* iteraciones */</span> <span class="nb">alternate</span> <span class="c">/* dirección */</span> <span class="nb">both</span> <span class="c">/* modo de estilos */</span> <span class="nb">paused</span><span class="p">;</span> <span class="c">/* estado */</span> <span class="p">}</span> </code></pre></div></div> <h3 id="múltiples-animaciones">Múltiples animaciones</h3> <p>CSS permite declarar múltiples animaciones para definirlas en una sola vez, a través de la propiedad abreviada <code class="highlighter-rouge">animation</code>. Para ello, solo hay que separar los distintos grupos de valores de esta propiedad con una coma.</p> <p>En este ejemplo declaramos cuatro animaciones a la vez.</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.multiples</span> <span class="p">{</span> <span class="nl">animation</span><span class="p">:</span> <span class="n">mueve</span> <span class="m">2s</span> <span class="nb">linear</span> <span class="nb">infinite</span><span class="p">,</span> <span class="n">pinta</span> <span class="m">1s</span> <span class="nb">ease-out</span> <span class="nb">infinite</span><span class="p">,</span> <span class="n">salta</span> <span class="m">200ms</span> <span class="nf">steps</span><span class="p">(</span><span class="m">4</span><span class="p">)</span> <span class="m">3</span><span class="p">,</span> <span class="n">amaga</span> <span class="m">0.5s</span> <span class="nb">ease-in</span> <span class="nb">paused</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p class="notice-info">Estas animaciones iniciarán al mismo momento, pero tienen una duración distinta. La última no empezaría hasta que su estado se convierta a <code class="highlighter-rouge">running</code>, ya que de inicio está en pausa.</p> <h3 id="encadenar-animaciones">Encadenar animaciones</h3> <p>Usando la propiedad <code class="highlighter-rouge">animation-delay</code> con cierta perspicacia es posible encadenar múltiples animaciones, de modo que al terminar una empiece la otra. Es un truco muy sencillo de aplicar. Se trata de retardar la siguiente animación lo que duran las animaciones anteriores, en su conjunto.</p> <p>Vamos a ver un ejemplo:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.multiples</span> <span class="p">{</span> <span class="nl">animation</span><span class="p">:</span> <span class="n">mueve</span> <span class="m">250ms</span> <span class="nb">linear</span><span class="p">,</span> <span class="n">pinta</span> <span class="m">300ms</span> <span class="nb">linear</span> <span class="m">250ms</span><span class="p">,</span> <span class="n">salta</span> <span class="m">450ms</span> <span class="nb">linear</span> <span class="m">550ms</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p class="notice-info">Debido a que la primera animación dura 250 milisegundos, el inicio de la segunda se retrasa la misma duración. Por su parte, la segunda dura 300 milisegundos, por tanto, la tercera se retrasará el tiempo de la duración de las dos animaciones anteriores, equivalente a 550 milisegundos.</p>RecursivosLas animaciones CSS permiten crear efectos de movimiento entre dos estilos diferentes de un elemento HTML, pasando por distintas fases intermedias, y sin necesidad de usar JavaScript. Además, se pueden iniciar sin que el usuario realice una acción concreta. Por tanto, son más potentes que las transiciones.CSS: Transiciones2024-03-04T00:00:00+00:002024-03-04T00:00:00+00:00https://recursivos.com/css/transiciones<p>Las <strong>transiciones</strong> permiten realizar cambios graduales de estilos CSS para pasar de un estado a otro en un tiempo mayor que 0 segundos. Estos cambios pueden suceder a partir de un evento concreto, como sería el caso de poner el cursor (puntero del ratón) encima de un elemento en el que se usa las <a href="/css/pseudoclases/">pseudoclases</a> <code class="highlighter-rouge">:hover</code> o <code class="highlighter-rouge">:active</code>, o aplicado directamente con JavaScript.</p> <p>En CSS existe una serie de propiedades específicas que permiten indicar las propiedades del elemento que deben cambiar gradualmente, la duración de la animación o el tipo de transición que debe aplicarse.</p> <p>Propiedades descritas en este artículo:</p> <table> <thead> <tr> <th style="text-align: left">Propiedad</th> <th style="text-align: left">Descripción</th> </tr> </thead> <tbody> <tr> <td style="text-align: left"><code><a href="/css/transiciones/#transition-property" title="La propiedad 'transition-property'">transition-property</a></code></td> <td style="text-align: left">Indica las propiedades a animar.</td> </tr> <tr> <td style="text-align: left"><code><a href="/css/transiciones/#transition-duration" title="La propiedad 'transition-duration'">transition-duration</a></code></td> <td style="text-align: left">Indica la duración de la animación.</td> </tr> <tr> <td style="text-align: left"><code><a href="/css/transiciones/#transition-timing-function" title="La propiedad 'transition-timing-function'">transition-timing-function</a></code></td> <td style="text-align: left">Indica la función de animación.</td> </tr> <tr> <td style="text-align: left"><code><a href="/css/transiciones/#transition-delay" title="La propiedad 'transition-delay'">transition-delay</a></code></td> <td style="text-align: left">Indica el tiempo de espera.</td> </tr> <tr> <td style="text-align: left"><code><a href="/css/transiciones/#transition" title="La propiedad 'transition'">transition</a></code></td> <td style="text-align: left">Abreviatura de todas las anteriores.</td> </tr> </tbody> </table> <p>Un ejemplo de transición sería el siguiente. Creamos un rectángulo naranja que cuando se pulse (pseudoclase <code class="highlighter-rouge">:active</code>) cambiará de estado, pasando de tener un ancho de 80 píxeles a 160 píxeles y volviéndose de color turquesa.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.rectangulo</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">#ff7f2a</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">30px</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">80px</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.alarga</span> <span class="p">{</span> <span class="nl">transition</span><span class="p">:</span> <span class="nb">all</span> <span class="m">1s</span> <span class="nb">ease-in-out</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .rectangulo { background: #ff7f2a; height: 30px; width: 80px; } .alarga { transition: all 1s ease-in-out; } .alarga:active { background: teal; width: 160px; } </style> <blockquote> <div class="rectangulo alarga"></div> </blockquote> <p class="notice-info">Al mantener presionado el rectángulo naranja se hará más ancho y cambiará de color de forma gradual durante un segundo. Al dejar de presionar, regresará a su aspecto original, también durante un segundo.</p> <p class="notice-info">En este ejemplo usamos la propiedad abreviada (<em>shorthand</em>) <code class="highlighter-rouge">transition</code>, pero en los siguientes ejemplos usaremos las propiedades específicas para ver las características de cada una.</p> <h2 id="transition-property">La propiedad ‘transition-property’</h2> <p>La propiedad CSS <code class="highlighter-rouge">transition-property</code> permite indicar los nombres de las propiedades sobre las que se quiere aplicar el efecto de una transición. Para indicar una lista de propiedades se pueden separar por una coma. Con la palabra clave <code class="highlighter-rouge">all</code> se aplicará la transición a todas las propiedades CSS.</p> <p>Es bastante habitual, por ejemplo, usar como valor las propiedades <code class="highlighter-rouge">color</code>, para hacer una transición del color del texto; <code class="highlighter-rouge">background</code>, para cambiar el color de fondo; <code class="highlighter-rouge">border</code>, para el estilo de los bordes; <code class="highlighter-rouge">opacity</code>, para la transparencia; y <code class="highlighter-rouge">transform</code>, para animar los cambios en las <a href="/css/transformaciones/">transformaciones</a> 2D y 3D.</p> <p>Si se indica una propiedad abreviada, como es el caso de <code class="highlighter-rouge">background</code>, la transición se aplicará a las propiedades que abrevia: <code class="highlighter-rouge">background-color</code>, <code class="highlighter-rouge">background-image</code>, <code class="highlighter-rouge">background-repeat</code>, etc.</p> <p>Para que una transición funcione correctamente, hay que tener un estado inicial y un estado final de la propiedad CSS que se quiere modificar. De no ser así, el navegador web no podrá realizar la animación de transición.</p> <p>Vamos a ver un ejemplo especificando la transición solo para la propiedad <code class="highlighter-rouge">background</code>, de esta manera veremos como cambia de tamaño de forma brusca (<code class="highlighter-rouge">0s</code>) y de color de forma suave (<code class="highlighter-rouge">2s</code>).</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.solo-fondo</span> <span class="p">{</span> <span class="nl">transition-duration</span><span class="p">:</span> <span class="m">2s</span><span class="p">;</span> <span class="nl">transition-property</span><span class="p">:</span> <span class="n">background</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .solo-fondo { transition-duration: 2s; transition-property: background; } .solo-fondo:active { background: teal; width: 160px; } </style> <blockquote> <div class="rectangulo solo-fondo"></div> </blockquote> <p class="notice-info">Al indicar que solo queremos la transición en el color de fondo (<code class="highlighter-rouge">background</code>), no hay transición en el cambio de tamaño ni en ninguna otra propiedad CSS que pudiéramos haber modificado.</p> <h2 id="transition-duration">La propiedad ‘transition-duration’</h2> <p>Para definir la duración de la transición se usa la propiedad <code class="highlighter-rouge">transition-duration</code>, desde el inicio hasta el final de la transición. También se puede indicar una lista de duraciones, que corresponderán con las propiedades que se haya definido en la propiedad <code class="highlighter-rouge">transition-property</code>, siguiendo el mismo orden.</p> <p>El valor por defecto de esta propiedad es <code class="highlighter-rouge">0s</code>, que significa 0 segundos. Con este valor no se producirá ninguna animación de transición, por tanto el cambio de estilos será instantáneo. Los valores negativos no serán válidos. Debe usarse las unidades de tiempo en segundos (<code class="highlighter-rouge">s</code>) o en milisegundos (<code class="highlighter-rouge">ms</code>).</p> <p>Vamos a reutilizar nuestro ejemplo para crear una transición que dure cuatro veces más que en los anteriores ejemplos, por tanto, cuatro segundos.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.cuatro-segundos</span> <span class="p">{</span> <span class="nl">transition-duration</span><span class="p">:</span> <span class="m">4s</span><span class="p">;</span> <span class="nl">transition-property</span><span class="p">:</span> <span class="nb">all</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .cuatro-segundos { transition-duration: 4s; transition-property: all; } .cuatro-segundos:active { background: teal; width: 160px; } </style> <blockquote> <div class="rectangulo cuatro-segundos"></div> </blockquote> <p class="notice-info">Se puede ver como al pulsar el rectángulo naranja, se alarga y cambia de color gradualmente a lo largo de cuatro segundos. Es mucho más lento.</p> <h2 id="transition-timing-function">La propiedad ‘transition-timing-function’</h2> <p>La propiedad <code class="highlighter-rouge">transition-timing-function</code> es utilizada para especificar la función que se debe usar en la animación de la transición. La función define la aceleración de los pasos intermedios de la animación. Por ejemplo, puede ser una función lineal con la velocidad constante (<code class="highlighter-rouge">linear</code>), o una función que comience la transición más lentamente pero que luego acelere en el tramo final (<code class="highlighter-rouge">ease-in</code>).</p> <p>En la tabla siguiente se muestra todas las funciones predeterminadas que nos servirán para modificar la velocidad de las transiciones:</p> <table> <thead> <tr> <th style="text-align: left">Valor</th> <th style="text-align: left">Inicio</th> <th style="text-align: left">Medio</th> <th style="text-align: left">Final</th> </tr> </thead> <tbody> <tr> <td style="text-align: left"><code class="highlighter-rouge">ease</code></td> <td style="text-align: left">Lento</td> <td style="text-align: left">Rápido</td> <td style="text-align: left">Lento</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">linear</code></td> <td style="text-align: left">Normal</td> <td style="text-align: left">Normal</td> <td style="text-align: left">Normal</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">ease-in</code></td> <td style="text-align: left">Lento</td> <td style="text-align: left">Normal</td> <td style="text-align: left">Normal</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">ease-out</code></td> <td style="text-align: left">Normal</td> <td style="text-align: left">Normal</td> <td style="text-align: left">Lento</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">ease-in-out</code></td> <td style="text-align: left">Lento</td> <td style="text-align: left">Normal</td> <td style="text-align: left">Lento</td> </tr> </tbody> </table> <p>Si no se indica ninguna función, por defecto se usará <code class="highlighter-rouge">ease</code>, con un inicio de transición lento y suave, acelerando en el tramo medio de la transición y volviendo a frenar en el tramo final para terminar lentamente.</p> <p>A continuación se muestra un ejemplo de cada función:</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.ease</span> <span class="p">{</span> <span class="nl">transition-timing-function</span><span class="p">:</span> <span class="nb">ease</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.linear</span> <span class="p">{</span> <span class="nl">transition-timing-function</span><span class="p">:</span> <span class="nb">linear</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.ease-in</span> <span class="p">{</span> <span class="nl">transition-timing-function</span><span class="p">:</span> <span class="nb">ease-in</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.ease-out</span> <span class="p">{</span> <span class="nl">transition-timing-function</span><span class="p">:</span> <span class="nb">ease-out</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.ease-in-out</span> <span class="p">{</span> <span class="nl">transition-timing-function</span><span class="p">:</span> <span class="nb">ease-in-out</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .rectangulo { background: #ff7f2a; height: 30px; width: 80px; } .texto { color: #000; font-size: 0.875em; line-height: 30px; padding-left: 5px; } .ease { transition: all 2s ease } .linear { transition: all 2s linear } .ease-in { transition: all 2s ease-in } .ease-out { transition: all 2s ease-out } .ease-in-out { transition: all 2s ease-in-out } .rectangulo:active { background: teal; color: #fff; width: 160px; } </style> <blockquote> <p class="rectangulo texto ease"><em>ease</em></p> <p class="rectangulo texto linear"><em>linear</em></p> <p class="rectangulo texto ease-in"><em>ease-in</em></p> <p class="rectangulo texto ease-out"><em>ease-out</em></p> <p class="rectangulo texto ease-in-out"><em>ease-in-out</em></p> </blockquote> <p class="notice-info">Todos tardan dos segundos en finalizar el cambio, pero unos dan la aparente sensación de ser más rápidos que otros.</p> <h3 id="la-función-cubic-bezier">La función ‘cubic-bezier()’</h3> <p>Más allá de estas funciones predeterminadas, existe la posibilidad de personalizar la aceleración y la desaceleración. La función <code class="highlighter-rouge">cubic-bezier()</code> permite definir una curva de tiempo personalizada. Para ello utiliza dos puntos de control definidos a partir de cuatro parámetros que llamaremos <code class="highlighter-rouge">x1</code>, <code class="highlighter-rouge">y1</code>, <code class="highlighter-rouge">x2</code> e <code class="highlighter-rouge">y2</code>.</p> <p>¿Qué significan estos cuatro parámetros?</p> <table> <thead> <tr> <th style="text-align: left">Puntos</th> <th style="text-align: left">Significado</th> </tr> </thead> <tbody> <tr> <td style="text-align: left"><code class="highlighter-rouge">x1</code></td> <td style="text-align: left">Coordenada X del primer punto de control.</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">y1</code></td> <td style="text-align: left">Coordenada Y del primer punto de control.</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">x2</code></td> <td style="text-align: left">Coordenada X del segundo punto de control.</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">y2</code></td> <td style="text-align: left">Coordenada Y del segundo punto de control.</td> </tr> </tbody> </table> <p>Estos cuatro parámetros serán valores numéricos positivos o negativos, con decimales. El valor 0 está en el inicio de la transición y el valor 1 se encuentra en el final. Imagina una cuadrícula de coordenadas cartesianas: el punto “0, 0” está abajo a la izquierda, mientras que el punto “1, 1” está arriba a la derecha.</p> <p>En este ejemplo veremos una función personalizada.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.cubic-bezier</span> <span class="p">{</span> <span class="nl">transition-duration</span><span class="p">:</span> <span class="m">2s</span><span class="p">;</span> <span class="nl">transition-property</span><span class="p">:</span> <span class="nb">all</span><span class="p">;</span> <span class="nl">transition-timing-function</span><span class="p">:</span> <span class="nf">cubic-bezier</span><span class="p">(</span><span class="m">0.8</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0.2</span><span class="p">,</span> <span class="m">1</span><span class="p">);</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .cubic-bezier { transition-duration: 2s; transition-property: all; transition-timing-function: cubic-bezier(0.8, 0, 0.2, 1); } .cubic-bezier:active { background: teal; width: 160px; } </style> <blockquote> <div class="rectangulo cubic-bezier"></div> </blockquote> <p class="notice-info">Al mantener pulsado el rectángulo naranja se puede ver como la transición empieza muy lentamente, en el tramo central avanza muy rápidamente y otra vez termina muy lentamente.</p> <p class="notice-success">Puedes usar la <a href="https://cubic-bezier.com/" rel="noopener noreferrer" target="_blank">herramienta externa cubic-bezier</a> para crear funciones de aceleración personalizadas, ya que es más intuitiva.</p> <h3 id="la-función-steps">La función ‘steps()’</h3> <p>Con la función <code class="highlighter-rouge">steps()</code> es posible crear una transición que se realiza a partir de un número determinado de saltos bruscos. Por tanto, no se producirá mediante una animación suave entre diferentes valores, sino de forma escalonada.</p> <p>Por ejemplo, si se indica que la transición tenga 4 pasos, se mantendrá de forma temporal en el 0%, el 25%, el 50% y el 75% del momento exacto de la duración, realizando 4 paradas desde el principio hasta el final.</p> <p>De forma opcional, puede indicarse un segundo parámetro que indica si la transición debería saltar al principio o al final de cada paso. Con la palabra clave <code class="highlighter-rouge">start</code>, el cambio de valores ocurre al inicio de cada intervalo; y con la palabra clave <code class="highlighter-rouge">end</code>, el cambio ocurre al final de cada intervalo. Por defecto se usa <code class="highlighter-rouge">end</code>.</p> <p>Vamos a ver una transición sin suavidad, en 4 pasos bruscos.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.steps</span> <span class="p">{</span> <span class="nl">transition-duration</span><span class="p">:</span> <span class="m">2s</span><span class="p">;</span> <span class="nl">transition-property</span><span class="p">:</span> <span class="nb">all</span><span class="p">;</span> <span class="nl">transition-timing-function</span><span class="p">:</span> <span class="nf">steps</span><span class="p">(</span><span class="m">4</span><span class="p">,</span> <span class="nb">start</span><span class="p">);</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .steps { transition-duration: 2s; transition-property: all; transition-timing-function: steps(4, start); } .steps:active { background: teal; width: 160px; } </style> <blockquote> <div class="rectangulo steps"></div> </blockquote> <p class="notice-info">Al mantener pulsado el rectángulo naranja, la transición ha saltado del estado que tiene al principio con el estado que tendría al 25% de recorrido. Después ha saltado al 50%, al 75% y finalmente al 100%.</p> <h2 id="transition-delay">La propiedad ‘transition-delay’</h2> <p>La propiedad CSS <code class="highlighter-rouge">transition-delay</code> permite indicar el tiempo que tarda en empezar la transición. Puede ser útil cuando se cambia valores de transformación, ya que en algunos casos se podría crear un bucle infinito.</p> <p>Supongamos que queremos animar la traslación de un elemento cuando se pone el cursor encima. Al moverse, en algún momento quedaría fuera de la zona de debajo del cursor y regresaría a su estado original. En este punto, el elemento volvería a quedar debajo del cursor, volviendo a empezar la transición.</p> <p>Los valores por defecto serán <code class="highlighter-rouge">0s</code> (0 segundos) y <code class="highlighter-rouge">0ms</code> (0 milisegundos), equivalentes a que no hay tiempo de espera. Un valor positivo retrasará el inicio de la transición. Con un valor negativo, el elemento se animará como si ya hubiera estado cambiando durante el período de tiempo indicado.</p> <p>Vamos a ver un ejemplo aplicando un retraso de <code class="highlighter-rouge">1.2s</code>.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.delay</span> <span class="p">{</span> <span class="nl">transition-delay</span><span class="p">:</span> <span class="m">1.2s</span><span class="p">;</span> <span class="nl">transition-duration</span><span class="p">:</span> <span class="m">0.5s</span><span class="p">;</span> <span class="nl">transition-property</span><span class="p">:</span> <span class="nb">all</span><span class="p">;</span> <span class="nl">transition-timing-function</span><span class="p">:</span> <span class="nb">ease-in-out</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .delay { transition-delay: 1.2s; transition-duration: 0.5s; transition-property: all; transition-timing-function: ease-in-out; } .delay:active { background: teal; width: 160px; } </style> <blockquote> <div class="rectangulo delay"></div> </blockquote> <p class="notice-info">Al mantener pulsado el rectángulo naranja, la transición no empieza hasta que haya transcurrido <code class="highlighter-rouge">1.2s</code>. Después, empezará la transición, que tendrá una duración de medio segundo (<code class="highlighter-rouge">0.5s</code>). Al dejar de pulsar el rectángulo, también tardará <code class="highlighter-rouge">1.2s</code> en regresar a su estado original.</p> <h2 id="transition">La propiedad ‘transition’</h2> <p>La propiedad CSS <code class="highlighter-rouge">transition</code> es una abreviatura (<em>shorthand</em>) que unifica todas las anteriores. Para indicar que no hay transición se usa la palabra clave <code class="highlighter-rouge">none</code>. Para indicar una transición se usa los 4 valores en el siguiente orden:</p> <ol> <li>Propiedad</li> <li>Duración</li> <li>Función de tiempo</li> <li>Tiempo de espera</li> </ol> <p>Algunos ejemplos:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.ejemplo1</span> <span class="p">{</span> <span class="nl">transition</span><span class="p">:</span> <span class="nb">all</span> <span class="m">2s</span> <span class="nb">ease-in-out</span> <span class="m">50ms</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.ejemplo2</span> <span class="p">{</span> <span class="nl">transition</span><span class="p">:</span> <span class="n">background</span> <span class="m">.25s</span> <span class="nb">ease-in</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.ejemplo3</span> <span class="p">{</span> <span class="nl">transition</span><span class="p">:</span> <span class="nf">color</span> <span class="m">300ms</span> <span class="nb">linear</span> <span class="m">10ms</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.ejemplo4</span> <span class="p">{</span> <span class="nl">transition</span><span class="p">:</span> <span class="nb">all</span> <span class="m">1s</span> <span class="nf">cubic-bezier</span><span class="p">(</span><span class="m">0.25</span><span class="p">,</span> <span class="m">0.5</span><span class="p">,</span> <span class="m">0.75</span><span class="p">,</span> <span class="m">0.5</span><span class="p">);</span> <span class="p">}</span> <span class="nc">.ejemplo5</span> <span class="p">{</span> <span class="nl">transition</span><span class="p">:</span> <span class="n">transform</span> <span class="m">2s</span> <span class="nf">steps</span><span class="p">(</span><span class="m">5</span><span class="p">)</span> <span class="m">1s</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p>El uso de esta propiedad es muy conveniente, ya que sintetiza mucho el código. Esto se traduce en una mayor facilidad a la hora de realizar el mantenimiento. Un archivo que ocupe menos memoria también se cargará más rápido.</p> <h3 id="múltiples-transiciones">Múltiples transiciones</h3> <p>Con CSS es posible definir múltiples transiciones a la vez. Es algo sencillo de realizar con la propiedad <code class="highlighter-rouge">transition</code>. Tan solo hay que separar los grupos de valores de esta propiedad mediante una coma.</p> <p>Por ejemplo, vamos a crear tres tipos de transición a la vez. El color de fondo cambiará gradualmente en <code class="highlighter-rouge">0.8s</code>, mientras que los bordes tardarán el doble (<code class="highlighter-rouge">1.6s</code>), y el tamaño del rectángulo necesitará <code class="highlighter-rouge">2.4s</code>.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.multiples</span> <span class="p">{</span> <span class="nl">transition</span><span class="p">:</span> <span class="n">background</span> <span class="m">0.8s</span> <span class="nb">ease-in</span><span class="p">,</span> <span class="n">border</span> <span class="m">1.6s</span> <span class="nb">ease-in</span><span class="p">,</span> <span class="n">width</span> <span class="m">2.4s</span> <span class="nb">ease-in</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .multiples { border: 2px solid red; transition: background 0.8s ease-in, border 1.6s ease-in, width 2.4s ease-in; } .multiples:active { background: teal; border: 2px solid blue; width: 160px; } </style> <blockquote> <div class="rectangulo multiples"></div> </blockquote> <p class="notice-info">Mantén pulsado el rectángulo naranja y observa como las tres propiedades (fondo, bordes y tamaño) cambian con una duración distinta.</p>RecursivosLas transiciones permiten realizar cambios graduales de estilos CSS para pasar de un estado a otro en un tiempo mayor que 0 segundos. Estos cambios pueden suceder a partir de un evento concreto, como sería el caso de poner el cursor (puntero del ratón) encima de un elemento en el que se usa las pseudoclases :hover o :active, o aplicado directamente con JavaScript.CSS: Matrices2024-02-24T00:00:00+00:002024-02-24T00:00:00+00:00https://recursivos.com/css/matrices<p>Las <strong>matrices</strong> son un concepto matemático usado para representar <a href="/css/transformaciones/">transformaciones</a> en dos dimensiones (2D) y tres dimensiones (3D). En CSS se utilizan para definir transformaciones arbitrarias que se aplican a los elementos HTML, como sería un cambio de posición, rotación, escalado o inclinación.</p> <p>Para crear matrices de transformación, CSS provee un par de funciones que se usan de forma específica para el 2D y el 3D. Son las siguientes:</p> <table> <thead> <tr> <th style="text-align: left">Función</th> <th style="text-align: left">Descripción</th> </tr> </thead> <tbody> <tr> <td style="text-align: left"><code class="highlighter-rouge">matrix()</code></td> <td style="text-align: left">Establece una matriz de transformación 2D.</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">matrix3d()</code></td> <td style="text-align: left">Establece una matriz de transformación 3D.</td> </tr> </tbody> </table> <h2 id="la-función-matrix">La función ‘matrix()’</h2> <p>La función <code class="highlighter-rouge">matrix()</code> permite definir una matriz de transformación bidimensional (2D), y debe usarse dentro de la propiedad CSS <code class="highlighter-rouge">transform</code>. Se trata de una potente función que permite realizar transformaciones complejas, combinando la traslación, la rotación, el escalado y la deformación en una sola, lo que proporciona un mayor control sobre la forma en que se aplican las transformaciones.</p> <p>Esta función admite 6 parámetros que serán valores numéricos. Cada uno de estos parámetros representa un tipo de transformación en dos dimensiones (2D). Podemos definir los 6 parámetros con las siguientes variables:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.matriz</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">matrix</span><span class="p">(</span><span class="n">a</span><span class="p">,</span> <span class="n">b</span><span class="p">,</span> <span class="n">c</span><span class="p">,</span> <span class="n">d</span><span class="p">,</span> <span class="n">tx</span><span class="p">,</span> <span class="n">ty</span><span class="p">)</span> <span class="p">}</span> </code></pre></div></div> <p>A continuación se detallan los parámetros:</p> <table> <thead> <tr> <th style="text-align: left">Parámetro</th> <th style="text-align: left">Descripción</th> </tr> </thead> <tbody> <tr> <td style="text-align: left"><code class="highlighter-rouge">a</code></td> <td style="text-align: left">Escalado en el eje X.</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">b</code></td> <td style="text-align: left">Deformación en el eje Y.</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">c</code></td> <td style="text-align: left">Deformación en el eje X.</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">d</code></td> <td style="text-align: left">Escalado en el eje Y.</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">tx</code></td> <td style="text-align: left">Traslación en el eje X.</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">ty</code></td> <td style="text-align: left">Traslación en el eje Y.</td> </tr> </tbody> </table> <p>El uso de todos estos parámetros define la transformación que se aplicará en la matriz 2D, por lo que debe mantenerse el orden indicado. Dicho de otro modo, los 6 parámetros representan las siguientes funciones:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.matriz</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">matrix</span><span class="p">(</span> <span class="nf">scaleX</span><span class="p">(),</span> <span class="nf">skewY</span><span class="p">(),</span> <span class="nf">skewX</span><span class="p">(),</span> <span class="nf">scaleY</span><span class="p">(),</span> <span class="nf">translateX</span><span class="p">(),</span> <span class="nf">translateY</span><span class="p">(),</span> <span class="p">)</span> <span class="p">}</span> </code></pre></div></div> <p>Los valores por defecto son los siguientes:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.matriz</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">matrix</span><span class="p">(</span><span class="m">1</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">1</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">);</span> <span class="p">}</span> </code></pre></div></div> <p class="notice-info">En los valores de translación, por defecto se interpretará que son píxeles. En caso de querer usar otras <a href="/css/unidades/">unidades de longitud</a>, será necesario indicarlas.</p> <p>Cabe señalar que la función <code class="highlighter-rouge">matrix()</code> trabaja sobre una matriz de 3×3, aunque solo admita 6 parámetros. Esto es debido al eje de la profundidad (Z), que usa los valores por defecto. Se puede distribuir la matriz de 3×3 de esta forma:</p> \[\begin{bmatrix}a & c & tx\\b & d & ty\\0 & 0 & 1\end{bmatrix}\] <p>Tal y como se puede deducir, en esta matriz de 3×3, los 3 valores de la primera fila corresponden al eje horizontal (X), los de la segunda fila corresponden al eje vertical (Y) y los de la tercera fila corresponden al eje de la profundidad (Z).</p> <p>Vamos a ver un ejemplo con una matriz de transformación en 2D. Para ello, creamos un contenedor cuadrado de color naranja y en su interior le colocamos otro cuadrado, pero de color turquesa, al que aplicamos la matriz.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.contenedor</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">#ff7f2aaa</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="nx">#ff7f2a</span><span class="p">;</span> <span class="nl">display</span><span class="p">:</span> <span class="nb">inline-block</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.contenido</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">teal</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.matriz</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">matrix</span><span class="p">(</span><span class="m">1.2</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">-0.5</span><span class="p">,</span> <span class="m">0.8</span><span class="p">,</span> <span class="m">20</span><span class="p">,</span> <span class="m">0</span><span class="p">);</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .contenedor { background: #ff7f2aaa; border: 1px solid #ff7f2a; display: inline-block; height: 40px; font-weight: bold; line-height: 40px; text-align: center; width: 40px; } .contenido { background: teal; height: 40px; width: 40px; } .matriz { transform: matrix(1.2, 0, -0.5, 0.8, 20, 0); } .separa { margin-left: 35px; } </style> <blockquote> <div class="contenedor"><div class="contenido">A</div></div> <div class="contenedor separa"><div class="contenido matriz">R</div></div> </blockquote> <p class="notice-info">En el caso de la izquierda, no se aplica la matriz de transformación. En el caso de la derecha, se ha indicado un escalado de 1.2 en el eje horizontal y de 0.8 en el eje vertical. También se ha aplicado una deformación en X de 0.8. Finalmente, se ha aplicado una traslación de 20 píxeles hacia la derecha (eje X).</p> <h2 id="la-función-matrix3d">La función ‘matrix3d()’</h2> <p>La función <code class="highlighter-rouge">matrix3d()</code> permite definir una matriz de transformación tridimensional (3D), y se usa como valor de la propiedad CSS <code class="highlighter-rouge">transform</code>. Es muy útil porque ofrece un control con mayor precisión sobre las transformaciones, pero en este caso permite combinar múltiples transformaciones tridimensionales (3D).</p> <p>Esta función admite 16 parámetros que controlan diferentes aspectos de la transformación tridimensional, entre los que se incluye la rotación, el escalado, la traslación y la perspectiva. Estos 16 parámetros se distribuyen en 4 filas de 4 columnas; dando como resultado una matriz de 4×4. Podemos definir los 16 parámetros con las siguientes variables:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.esquema3d</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">matrix3d</span><span class="p">(</span> <span class="n">a1</span><span class="p">,</span> <span class="n">b1</span><span class="p">,</span> <span class="n">c1</span><span class="p">,</span> <span class="n">d1</span><span class="p">,</span> <span class="n">a2</span><span class="p">,</span> <span class="n">b2</span><span class="p">,</span> <span class="n">c2</span><span class="p">,</span> <span class="n">d2</span><span class="p">,</span> <span class="n">a3</span><span class="p">,</span> <span class="n">b3</span><span class="p">,</span> <span class="n">c3</span><span class="p">,</span> <span class="n">d3</span><span class="p">,</span> <span class="n">a4</span><span class="p">,</span> <span class="n">b4</span><span class="p">,</span> <span class="n">c4</span><span class="p">,</span> <span class="n">d4</span><span class="p">)</span> <span class="p">}</span> </code></pre></div></div> <p>Los parámetros de la primera columna (<code class="highlighter-rouge">a1</code>, <code class="highlighter-rouge">a2</code>, <code class="highlighter-rouge">a3</code> y <code class="highlighter-rouge">a4</code>) son para al eje horizontal (X); los de la segunda (<code class="highlighter-rouge">b1</code>, <code class="highlighter-rouge">b2</code>, <code class="highlighter-rouge">b3</code> y <code class="highlighter-rouge">b4</code>) son para al eje vertical (Y); los de la tercera (<code class="highlighter-rouge">c1</code>, <code class="highlighter-rouge">c2</code>, <code class="highlighter-rouge">c3</code> y <code class="highlighter-rouge">c4</code>) son para la profundidad (Z); y los de la cuarta (<code class="highlighter-rouge">d1</code>, <code class="highlighter-rouge">d2</code>, <code class="highlighter-rouge">d3</code> y <code class="highlighter-rouge">d4</code>) corresponden a la traslación.</p> <p>A continuación se detallan los parámetros que se relacionan con las habituales funciones de transformación:</p> <table> <thead> <tr> <th style="text-align: left">Parámetro</th> <th style="text-align: left">Descripción</th> </tr> </thead> <tbody> <tr> <td style="text-align: left"><code class="highlighter-rouge">a1</code></td> <td style="text-align: left">Escalado en el eje X.</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">b2</code></td> <td style="text-align: left">Escalado en el eje Y.</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">c3</code></td> <td style="text-align: left">Escalado en el eje Z.</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">a2</code></td> <td style="text-align: left">Deformación en el eje X.</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">b1</code></td> <td style="text-align: left">Deformación en el eje Y.</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">a4</code></td> <td style="text-align: left">Traslación en el eje X.</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">b4</code></td> <td style="text-align: left">Traslación en el eje Y.</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">c4</code></td> <td style="text-align: left">Traslación en el eje Z.</td> </tr> </tbody> </table> <p>El resto de los parámetros, como <code class="highlighter-rouge">a3</code>, <code class="highlighter-rouge">b3</code>, <code class="highlighter-rouge">c1</code> y <code class="highlighter-rouge">c2</code> tienen que ver con un estiramiento (transformación de corte); mientras que <code class="highlighter-rouge">d1</code>, <code class="highlighter-rouge">d2</code>, <code class="highlighter-rouge">d3</code> y <code class="highlighter-rouge">d4</code> tienen que ver con la perspectiva y el control de la proyección.</p> <p>Los valores por defecto son los siguientes:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.por-defecto</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">matrix3d</span><span class="p">(</span> <span class="m">1</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">1</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">1</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">1</span><span class="p">)</span> <span class="p">}</span> </code></pre></div></div> <p>Vamos a ver un ejemplo con una matriz de transformación en 3D. Reutilizamos el contenedor cuadrado y le añadimos un elemento hijo de color turquesa, al que aplicamos la matriz tridimensional (3D):</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.matriz3d</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">matrix3d</span><span class="p">(</span> <span class="m">1.1</span><span class="p">,</span> <span class="m">0.1</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">-0.005</span><span class="p">,</span> <span class="m">-0.2</span><span class="p">,</span> <span class="m">0.7</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0.009</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">1</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">8</span><span class="p">,</span> <span class="m">1</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">1</span><span class="p">);</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .contenedor3d { background: #ff7f2aaa; border: 1px solid #ff7f2a; display: inline-block; height: 40px; font-weight: bold; line-height: 40px; text-align: center; width: 40px; } .matriz3d { transform: matrix3d( 1.1, 0.1, 0, -0.005, -0.2, 0.7, 0, 0.009, 0, 0, 1, 0, 8, 1, 0, 1); } </style> <blockquote> <div class="contenedor3d"><div class="contenido">A</div></div> <div class="contenedor3d separa"><div class="contenido matriz3d">R</div></div> </blockquote> <p class="notice-info">En la figura de la derecha se ha aplicado una matriz tridimensional que ha deformado el elemento, pasando de ser un cuadrado como en el caso de la izquierda a ser un polígono irregular de cuatro lados.</p>RecursivosLas matrices son un concepto matemático usado para representar transformaciones en dos dimensiones (2D) y tres dimensiones (3D). En CSS se utilizan para definir transformaciones arbitrarias que se aplican a los elementos HTML, como sería un cambio de posición, rotación, escalado o inclinación.CSS: Perspectiva2024-02-23T00:00:00+00:002024-02-23T00:00:00+00:00https://recursivos.com/css/perspectiva<p>La <strong>perspectiva</strong> es una técnica gráfica que simula la percepción de profundidad, creando bonitos efectos tridimensionales (3D). En CSS existe la posibilidad de crear efectos visuales más realistas para las páginas web. Esto se consigue indicando <strong>un punto de fuga</strong> a partir de un valor numérico de distancia.</p> <p>CSS provee la función <code class="highlighter-rouge">perspective()</code> para indicar la distancia del punto de fuga, y se usa dentro de la propiedad de <a href="/css/transformaciones/">transformación</a> <code class="highlighter-rouge">transform</code>. También existe una serie de propiedades específicas que se detallan a continuación.</p> <table> <thead> <tr> <th style="text-align: left">Función</th> <th style="text-align: left">Descripción</th> </tr> </thead> <tbody> <tr> <td style="text-align: left"><code class="highlighter-rouge">perspective()</code></td> <td style="text-align: left">Indica el punto de fuga.</td> </tr> </tbody> </table> <table> <thead> <tr> <th style="text-align: left">Propiedad</th> <th style="text-align: left">Descripción</th> </tr> </thead> <tbody> <tr> <td style="text-align: left"><code class="highlighter-rouge">perspective</code></td> <td style="text-align: left">Indica la distancia del punto de fuga.</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">perspective-origin</code></td> <td style="text-align: left">Indica la posición del punto de fuga.</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">backface-visibility</code></td> <td style="text-align: left">Oculta o muestra la cara posterior.</td> </tr> </tbody> </table> <p>El punto de fuga se entiende de la siguiente manera: a mayor distancia, más lejos está el usuario y menor se aprecia la percepción de perspectiva; y viceversa, a menor distancia, mayor será la simulación de la perspectiva.</p> <h2 id="la-función-perspective">La función ‘perspective()’</h2> <p>La función <code class="highlighter-rouge">perspective()</code> permite indicar la distancia del punto de fuga para simular que hay profundidad; es decir, la distancia que hay entre el usuario y el plano del eje Z. Así obtendremos una percepción de perspectiva desde la que estaría el espectador si la interfaz 2D fuera en 3D. Como en todas las funciones de transformación, se usa como valor de la propiedad CSS <code class="highlighter-rouge">transform</code>.</p> <p>Esta función admite un único parámetro, que debe ser un valor numérico indicando unidades de longitud. Este valor debe representar la distancia que hay entre el usuario y el plano del eje Z. El valor debe ser positivo. Si el valor es <code class="highlighter-rouge">0</code> o negativo, no se aplicará ninguna transformación de perspectiva.</p> <p>Vamos a ver un ejemplo de un contenedor cuadrado con un elemento turquesa al que rotamos 45 grados a través del eje vertical (Y). La arista más cercana se verá más larga y la arista más lejana se verá más corta. Las aristas superior e inferior apuntarán al punto de fuga indicado a una distancia de 60 píxeles.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.contenedor</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">#ff7f2aaa</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="nx">#ff7f2a</span><span class="p">;</span> <span class="nl">display</span><span class="p">:</span> <span class="nb">inline-block</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.contenido</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">teal</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.perspectiva</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">perspective</span><span class="p">(</span><span class="m">60px</span><span class="p">)</span> <span class="nf">rotateY</span><span class="p">(</span><span class="m">45deg</span><span class="p">);</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .contenedor { background: #ff7f2aaa; border: 1px solid #ff7f2a; display: inline-block; height: 40px; font-weight: bold; line-height: 40px; text-align: center; width: 40px; } .contenido { background: teal; height: 40px; width: 40px; } .perspectiva { transform: perspective(60px) rotateY(45deg); } .separa { margin-left: 35px; } </style> <blockquote> <div class="contenedor"><div class="contenido">A</div></div> <div class="contenedor separa"><div class="contenido perspectiva">R</div></div> </blockquote> <p class="notice-info">En el ejemplo se puede ver el caso de la izquierda, sin perspectiva, y el caso de la derecha, con una perspectiva de 50 píxeles. Si el valor fuera más pequeño, la perspectiva se vería todavía más pronunciada.</p> <h2 id="la-propiedad-perspective">La propiedad ‘perspective’</h2> <p>La propiedad CSS <code class="highlighter-rouge">perspective</code> funciona de forma muy similar a la función anterior, pero se diferencia básicamente en dos aspectos. El primero es que permite indicar la distancia del punto de fuga en el elemento contenedor (padre), de modo que todos los elementos hijos tendrán la misma perspectiva. Y el segundo es que no requiere el uso de la propiedad <code class="highlighter-rouge">transform</code>.</p> <p>Esta propiedad admite un único valor que será numérico en unidades de longitud. Dicho valor representará la distancia que hay entre el usuario y el plano del eje Z. No admite el valor <code class="highlighter-rouge">0</code> ni tampoco valores negativos; en estos casos se considerará un error de sintaxis. El valor <code class="highlighter-rouge">none</code> indica que no se aplica transformación de perspectiva. Si el valor es menor que <code class="highlighter-rouge">1px</code>, se fija en <code class="highlighter-rouge">1px</code>.</p> <p>En el siguiente ejemplo, el elemento contenedor (padre) usa la propiedad <code class="highlighter-rouge">perspective</code>, que hará que los elementos hijos se vean con perspectiva. El elemento hijo usa la propiedad <code class="highlighter-rouge">rotate</code> para quitarlo del plano 2D y poder visualizar el efecto de simulación de perspectiva.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.contenedor-pp</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">#ff7f2aaa</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="nx">#ff7f2a</span><span class="p">;</span> <span class="nl">display</span><span class="p">:</span> <span class="nb">inline-block</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="nl">perspective</span><span class="p">:</span> <span class="m">60px</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.contenido-pp</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">teal</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="nl">rotate</span><span class="p">:</span> <span class="nb">y</span> <span class="m">-60deg</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .contenedor-pp { background: #ff7f2aaa; border: 1px solid #ff7f2a; display: inline-block; height: 40px; font-weight: bold; line-height: 40px; perspective: 60px; text-align: center; width: 40px; } .contenido-pp { background: teal; height: 40px; rotate: y -60deg; width: 40px; } .separa { margin-left: 35px; } </style> <blockquote> <div class="contenedor-pp"><div class="contenido">A</div></div> <div class="contenedor-pp separa"><div class="contenido contenido-pp">R</div></div> </blockquote> <p class="notice-info">Este ejemplo se diferencia del anterior en que se rota el cuadrado turquesa -60 grados a través del eje Y. La perspectiva sigue siendo de 60 píxeles de distancia, por lo que el punto de fuga es el mismo.</p> <h2 id="la-propiedad-perspective-origin">La propiedad ‘perspective-origin’</h2> <p>En CSS también existe la propiedad <code class="highlighter-rouge">perspective-origin</code>, que permite indicar la posición del punto de fuga sobre el plano al que observa el usuario. Por defecto, el punto de fuga está en el centro del elemento contenedor (padre), siendo el elemento sobre el que se usa dicha propiedad, al igual que <code class="highlighter-rouge">perspective</code>.</p> <p>Esta propiedad admite uno o dos valores, dependiendo de si se quiere modificar la posición del punto de fuga a través del eje horizontal (X) o si también se quiere modificar su posición a través del eje vertical (Y).</p> <p>Puede usarse valores numéricos en unidades de longitud, pero si se desea también se puede usar las palabras clave que se detallan a continuación.</p> <p>Para el eje horizontal (X):</p> <table> <thead> <tr> <th style="text-align: left">Valor</th> <th style="text-align: left">Descripción</th> </tr> </thead> <tbody> <tr> <td style="text-align: left"><code class="highlighter-rouge">left</code></td> <td style="text-align: left">Equivale a <code class="highlighter-rouge">0</code>, pegado a la izquierda.</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">center</code></td> <td style="text-align: left">Equivale a <code class="highlighter-rouge">50%</code>, centrado horizontalmente.</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">right</code></td> <td style="text-align: left">Equivale a <code class="highlighter-rouge">100%</code>, pegado a la derecha.</td> </tr> </tbody> </table> <p>Para el eje vertical (Y):</p> <table> <thead> <tr> <th style="text-align: left">Valor</th> <th style="text-align: left">Descripción</th> </tr> </thead> <tbody> <tr> <td style="text-align: left"><code class="highlighter-rouge">top</code></td> <td style="text-align: left">Equivale a <code class="highlighter-rouge">0</code>, pegado arriba.</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">center</code></td> <td style="text-align: left">Equivale al <code class="highlighter-rouge">50%</code>, centrado verticalmente.</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">bottom</code></td> <td style="text-align: left">Equivale al <code class="highlighter-rouge">100%</code>, pegado abajo.</td> </tr> </tbody> </table> <p>Vamos a ver un ejemplo indicando que la posición del punto de fuga será en la esquina inferior izquierda, por lo que el valor será <code class="highlighter-rouge">left bottom</code>.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.contenedor-po</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">#ff7f2aaa</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="nx">#ff7f2a</span><span class="p">;</span> <span class="nl">display</span><span class="p">:</span> <span class="nb">inline-block</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="nl">perspective</span><span class="p">:</span> <span class="m">60px</span><span class="p">;</span> <span class="nl">perspective-origin</span><span class="p">:</span> <span class="nb">left</span> <span class="nb">bottom</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.contenido-po</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">teal</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="nl">rotate</span><span class="p">:</span> <span class="nb">y</span> <span class="m">-60deg</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .contenedor-po { background: #ff7f2aaa; border: 1px solid #ff7f2a; display: inline-block; height: 40px; font-weight: bold; line-height: 40px; perspective: 60px; perspective-origin: left bottom; text-align: center; width: 40px; } .contenido-po { background: teal; height: 40px; rotate: y -30deg; width: 40px; } .separa { margin-left: 35px; } </style> <blockquote> <div class="contenedor-po"><div class="contenido">A</div></div> <div class="contenedor-po separa"><div class="contenido contenido-po">R</div></div> </blockquote> <p class="notice-info">Tal y como se puede apreciar, en el caso de la derecha, el elemento turquesa ha quedado en perspectiva, teniendo el punto de fuga en la esquina inferior izquierda. La arista inferior no se deforma, pero la superior sí.</p> <h2 id="la-propiedad-backface-visibility">La propiedad ‘backface-visibility’</h2> <p>La propiedad CSS <code class="highlighter-rouge">backface-visibility</code> permite indicar si se oculta o se muestra la cara posterior (reverso) de un elemento 3D cuando se está rotando hacia el punto de vista del usuario. Esta propiedad no tiene ningún efecto en las transformaciones 2D sin perspectiva. Se aplica sobre el elemento contenedor (padre).</p> <p>Esta propiedad admite dos valores posibles: <code class="highlighter-rouge">hidden</code>, para indicar que no se muestre la cara oculta, y <code class="highlighter-rouge">visible</code> (por defecto), para indicar que debe mostrarse la cara oculta cuando esté de cara al usuario en un elemento que esté rotando. Si es visible, se muestra una imagen de espejo de la cara frontal.</p> <p>Debido al hecho de que por defecto se muestra la imagen invertida en el reverso, la principal utilidad de esta propiedad es evitar que la cara frontal de un elemento sea visible en la cara posterior. En casos así puede ser muy útil.</p> <p>Vamos a ver el reverso de nuestro ejemplo, haciéndolo girar más de 90 grados, hasta unos 150 grados. Así veremos la cara oculta.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.contenedor-bv</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">#ff7f2aaa</span><span class="p">;</span> <span class="nl">backface-visibility</span><span class="p">:</span> <span class="nb">visible</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="nx">#ff7f2a</span><span class="p">;</span> <span class="nl">display</span><span class="p">:</span> <span class="nb">inline-block</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="nl">perspective</span><span class="p">:</span> <span class="m">60px</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.contenido-bv</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">teal</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="nl">rotate</span><span class="p">:</span> <span class="nb">y</span> <span class="m">150deg</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .contenedor-bv { background: #ff7f2aaa; backface-visibility: visible; border: 1px solid #ff7f2a; display: inline-block; height: 40px; font-weight: bold; line-height: 40px; perspective: 60px; text-align: center; width: 40px; } .contenido-bv { background: teal; height: 40px; rotate: y 150deg; width: 40px; } .separa { margin-left: 35px; } </style> <blockquote> <div class="contenedor-bv"><div class="contenido">A</div></div> <div class="contenedor-bv separa"><div class="contenido contenido-bv">R</div></div> </blockquote> <p class="notice-info">En el caso de la izquierda, sin transformaciones aplicadas, vemos la cara frontal. En cambio, en el de la derecha, que está rotado 150 grados, vemos la cara frontal por detrás, invertida horizontalmente.</p>RecursivosLa perspectiva es una técnica gráfica que simula la percepción de profundidad, creando bonitos efectos tridimensionales (3D). En CSS existe la posibilidad de crear efectos visuales más realistas para las páginas web. Esto se consigue indicando un punto de fuga a partir de un valor numérico de distancia.CSS: Deformación2024-02-22T00:00:00+00:002024-02-22T00:00:00+00:00https://recursivos.com/css/deformacion<p>La <strong>deformación</strong> consiste en inclinar o sesgar un elemento a partir de un ángulo dado. Este efecto que distorsiona la apariencia original de los objetos se aplica en un plano de dos dimensiones (2D). Por tanto, en CSS podemos deformar elementos a través de los ejes horizontal (X) y vertical (Y).</p> <p>En CSS existe dos funciones se usan como valor de la propiedad de <a href="/css/transformaciones/">transformación</a> <code class="highlighter-rouge">transform</code>. Las dos funciones tratadas en este artículo son <code class="highlighter-rouge">skewX()</code> y <code class="highlighter-rouge">skewY()</code>, para los ejes horizontal y vertical, respectivamente.</p> <table> <thead> <tr> <th style="text-align: left">Función</th> <th style="text-align: left">Descripción</th> </tr> </thead> <tbody> <tr> <td style="text-align: left"><code class="highlighter-rouge">skewX()</code></td> <td style="text-align: left">Deforma el elemento a través del eje horizontal (X).</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">skewY()</code></td> <td style="text-align: left">Deforma el elemento a través del eje vertical (Y).</td> </tr> </tbody> </table> <p class="notice-info">A diferencia de las transformaciones de traslación, rotación y escalado, no existe ninguna propiedad específica para deformar elementos.</p> <p>Este tipo de transformación es un poco peculiar. Para deformar un elemento lo que hace es distorsionar cada uno de sus puntos en un cierto ángulo a través de la dirección indicada (X o Y). Cuanto más lejos esté un punto respecto a su origen, mayor será la inclinación, y más deformado quedará.</p> <p class="notice-warning">Hay que tener cuidado de no usar la función <code class="highlighter-rouge">skew()</code>, que se mantiene por razones de compatibilidad, pero está marcada como obsoleta y es probable que en un futuro ya no sea soportada en los navegadores web.</p> <h2 id="la-función-skewx">La función ‘skewX()’</h2> <p>La función <code class="highlighter-rouge">skewX()</code> debe ser usada como valor de la propiedad CSS <code class="highlighter-rouge">transform</code>, y permite indicar un ángulo de deformación o inclinación a través del eje horizontal (eje X). Al usar esta función, los vértices del elemento se desplazarán a través del eje horizontal. Los vértices superiores se desplazarán hacia la derecha o hacia la izquierda, y los inferiores lo harán en el sentido opuesto.</p> <p>Esta función admite un único parámetro, que será un valor numérico en unidades de ángulo. Puede ser un valor positivo o negativo, y admite el uso de decimales. Si el valor es positivo, el elemento se inclinará hacia la izquierda, y si es negativo se inclinará hacia la izquierda. El valor por defecto es el <code class="highlighter-rouge">0</code>.</p> <p>Para visualizar un ejemplo, creamos un contenedor con un elemento cuadrado, de color turquesa, que deformamos con un ángulo de 20 grados.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.contenedor</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">#ff7f2aaa</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="nx">#ff7f2a</span><span class="p">;</span> <span class="nl">display</span><span class="p">:</span> <span class="nb">inline-block</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.contenido</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">teal</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.deformarX</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">skewX</span><span class="p">(</span><span class="m">20deg</span><span class="p">);</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .contenedor { background: #ff7f2aaa; border: 1px solid #ff7f2a; display: inline-block; height: 40px; font-weight: bold; line-height: 40px; text-align: center; width: 40px; } .contenido { background: teal; height: 40px; width: 40px; } .deformarX { transform: skewX(20deg); } .separa { margin-left: 35px; } </style> <blockquote> <div class="contenedor"><div class="contenido">A</div></div> <div class="contenedor separa"><div class="contenido deformarX">R</div></div> </blockquote> <p class="notice-info">En este ejemplo, el caso de la izquierda aparece sin inclinar, mientras que el de la derecha aparece inclinado. Debido a que el valor es positivo, se inclina hacia la izquierda. Por tanto, los bordes inferiores se han desplazado hacia la derecha, y los superiores se han desplazado hacia la izquierda.</p> <h2 id="la-función-skewy">La función ‘skewY()’</h2> <p>La función <code class="highlighter-rouge">skewY()</code> es utilizada dentro de la propiedad <code class="highlighter-rouge">transform</code>, y permite indicar un ángulo de deformación o inclinación a través del eje vertical (eje Y). Cuando se usa esta función, los vértices del elemento se desplazarán a través del eje vertical. Los vértices de un lado se desplazarán hacia arriba o hacia abajo, y los del otro lado lo harán en el sentido opuesto.</p> <p>Esta función solo admite un parámetro referente al valor de inclinación, expresado en unidades de ángulo. Si se usa un valor positivo, el elemento se inclinará hacia abajo, y si se indica un valor negativo, se deformará hacia arriba. Su valor por defecto es el <code class="highlighter-rouge">0</code>, que indica que no se aplica deformación.</p> <p>En este ejemplo creamos el mismo contenido que en el caso anterior, pero aplicamos una deformación vertical, también de 20 grados.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.deformarY</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">skewY</span><span class="p">(</span><span class="m">20deg</span><span class="p">);</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .deformarY { transform: skewY(20deg); } </style> <blockquote> <div class="contenedor"><div class="contenido">A</div></div> <div class="contenedor separa"><div class="contenido deformarY">R</div></div> </blockquote> <p class="notice-info">En este ejemplo, el caso de la derecha aparece inclinado hacia abajo. El valor del ángulo es positivo, por lo que los bordes de la izquierda se han desplazado hacia arriba, y los bordes de la derecha se han desplazado hacia abajo.</p>RecursivosLa deformación consiste en inclinar o sesgar un elemento a partir de un ángulo dado. Este efecto que distorsiona la apariencia original de los objetos se aplica en un plano de dos dimensiones (2D). Por tanto, en CSS podemos deformar elementos a través de los ejes horizontal (X) y vertical (Y).CSS: Escalado2024-02-21T00:00:00+00:002024-02-21T00:00:00+00:00https://recursivos.com/css/escalado<p>El <strong>escalado</strong> consiste en cambiar el tamaño de un objeto, ya sea haciéndolo más grande o más pequeño, sin alterar su posición ni su orientación originales. La transformación de escalado se realiza a partir de un punto de referencia, que por defecto será el centro geométrico del elemento en cuestión.</p> <p>Cuando se aplica una transformación de escalado a un objeto, lo que se hace es multiplicar las coordenadas del objeto por un factor de escala en una o varias direcciones. Esto resulta en una expansión o compresión del objeto.</p> <p>En CSS existe una serie de funciones que permiten escalar elementos a través de la propiedad de <a href="/css/transformaciones/">transformación</a> <code class="highlighter-rouge">transform</code>. Es posible escalar elementos tanto en un plano bidimensional (2D) como en un espacio tridimensional (3D). También existe una propiedad CSS específica para escalar: <code class="highlighter-rouge">scale</code>.</p> <p>En la tabla siguiente se muestran las funciones de escalado:</p> <table> <thead> <tr> <th style="text-align: left">Función</th> <th style="text-align: left">Descripción</th> </tr> </thead> <tbody> <tr> <td style="text-align: left"><code class="highlighter-rouge">scaleX()</code></td> <td style="text-align: left">Escala el elemento a través del eje horizontal (X).</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">scaleY()</code></td> <td style="text-align: left">Escala el elemento a través del eje vertical (Y).</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">scale()</code></td> <td style="text-align: left">Abreviatura para el escalado en 2D (X, Y).</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">scaleZ()</code></td> <td style="text-align: left">Escala el elemento a través de la profundidad (Z).</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">scale3d()</code></td> <td style="text-align: left">Abreviatura para el escalado en 3D (X, Y, Z).</td> </tr> </tbody> </table> <p>Por defecto, el punto de referencia del escalado es el centro de los elementos, pero se puede modificar con la propiedad CSS <code class="highlighter-rouge">transform-origin</code>.</p> <h2 id="la-función-scalex">La función ‘scaleX()’</h2> <p>La función <code class="highlighter-rouge">scaleX()</code> está pensada para ser utilizada como valor de la propiedad CSS <code class="highlighter-rouge">transform</code> y permite realizar un escalado a través del eje horizontal. Por tanto, permite hacer objetos más anchos o más estrechos en el eje X. Aplicando este escalado, el elemento queda deformado respecto su proporción original.</p> <p>Esta función admite un único parámetro que será un valor numérico decimal; se trata de un factor de escala. Si el valor es 1 no se aplica transformación; si es 0, queda tan estrecho que no se ve; si es 2, el objeto tendrá el doble de anchura; y si es -1 quedará invertido como si se tratara de un espejo.</p> <p>Vamos a crear un contenedor cuadrado (de 40×40 píxeles), con un elemento hijo del mismo tamaño, de color turquesa. Escalamos el elemento hijo un factor de -0.75, por lo que ocupará una anchura del 75% y aparecerá horizontalmente invertido.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.contenedor</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">#ff7f2aaa</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="nx">#ff7f2a</span><span class="p">;</span> <span class="nl">display</span><span class="p">:</span> <span class="nb">inline-block</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.contenido</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">teal</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.escalarX</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">scaleX</span><span class="p">(</span><span class="m">-0.75</span><span class="p">);</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .contenedor { background: #ff7f2aaa; border: 1px solid #ff7f2a; display: inline-block; font-weight: bold; height: 40px; line-height: 40px; text-align: center; width: 40px; } .contenido { background: teal; height: 40px; width: 40px; } .escalarX { transform: scaleX(-0.75); } .separa { margin-left: 35px; } </style> <blockquote> <div class="contenedor"><div class="contenido">A</div></div> <div class="contenedor separa"><div class="contenido escalarX">R</div></div> </blockquote> <p class="notice-info">A la izquierda se muestra el ejemplo sin escalar, y a la derecha se puede ver el elemento de color turquesa más estrecho. El valor es negativo, por lo que ha dado la vuelta y ahora se ve el texto de su interior invertido.</p> <h2 id="la-función-scaley">La función ‘scaleY()’</h2> <p>La función <code class="highlighter-rouge">scaleY()</code> permite realizar una transformación de escalado a través del eje vertical, es decir, el eje de la Y. Como resultado, el elemento quedará más ancho o más estrecho verticalmente, por lo que se deformará, perdiendo su proporción original. Se utiliza como valor de la propiedad CSS <code class="highlighter-rouge">transform</code>.</p> <p>Como valor, esta función admite un parámetro referente al factor de escalado, por lo que será un valor numérico decimal. El valor por defecto es 1, en el que no se aplica ningún tipo de escalado. Con el valor 0, el elemento desaparece.</p> <p>En el siguiente ejemplo vamos a usar el mismo cuadrado turquesa, pero le aplicaremos un factor de escalado de 0.4 a través del eje vertical, por lo que el texto de su interior se verá bastante achatado.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.escalarY</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">scaleY</span><span class="p">(</span><span class="m">0.4</span><span class="p">);</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .escalarY { transform: scaleY(0.4); } </style> <blockquote> <div class="contenedor"><div class="contenido">A</div></div> <div class="contenedor separa"><div class="contenido escalarY">R</div></div> </blockquote> <p class="notice-info">¿Lo ves? El elemento de la derecha es el que tiene el factor de escala de 0.4 en el eje vertical, por lo que se ve achatado respecto al de la izquierda. Los bordes superior e inferior están más cerca del centro.</p> <h2 id="la-función-scale">La función ‘scale()’</h2> <p>La función <code class="highlighter-rouge">scale()</code> es una abreviatura (<em>shorthand</em>) que unifica las dos funciones que permiten realizar la transformación de escalado a través de los dos ejes de un plano 2D, el X y el Y. Por tanto, sintetiza el escalado bidimensional. También debe usarse dentro de la propiedad CSS <code class="highlighter-rouge">transform</code>.</p> <p>Esta función admite dos parámetros, separados por coma, que representan el factor de escalado de los ejes X (horizontal) e Y (vertical), en este orden. Si solo se indica un parámetro, el valor indicado se aplicará a ambos ejes, por lo que realizará un escalado uniforme, sin que el elemento se deforme.</p> <p>En el ejemplo siguiente aplicamos un escalado con un factor de -1 en el eje X y de 0.6 en el eje Y, por lo que como resultado deberá quedar invertido en el eje horizontal y achatado a través del eje vertical.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.escalar</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">scale</span><span class="p">(</span><span class="m">-1</span><span class="p">,</span> <span class="m">0.6</span><span class="p">);</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .escalar { transform: scale(-1, 0.6); } </style> <blockquote> <div class="contenedor"><div class="contenido">A</div></div> <div class="contenedor separa"><div class="contenido escalar">R</div></div> </blockquote> <p class="notice-info">En el ejemplo de la izquierda, el objeto turquesa aparece sin escalar, mientras que en el ejemplo de la derecha aparece totalmente invertido en el eje horizontal (como un espejo), y aplastado en el eje vertical.</p> <h2 id="la-función-scalez">La función ‘scaleZ()’</h2> <p>Con la función <code class="highlighter-rouge">scaleZ()</code> se puede aplicar una transformación de escalado a través del tercer eje de un espacio tridimensional, es decir, el eje de la profundidad (Z). Debe usarse dentro de la propiedad CSS <code class="highlighter-rouge">transform</code>.</p> <p>Esta función admite como parámetro un valor numérico, referente al factor de escalado del eje de la profundidad (Z). Al igual que en las funciones de escalado para los ejes X e Y, el valor por defecto es 1. Con un valor negativo, el escalado se aplicará en el sentido inverso. Esta función puede deformar elementos.</p> <p>Debido a que se escala a través del eje Z, para visualizar su resultado hay que alterar el plano 2D de los ejes X e Y. Por tanto, su resultado será visible cuando la propiedad <code class="highlighter-rouge">transform-style</code> tenga el valor <code class="highlighter-rouge">preserve-3d</code> y la transformación se complemente con otras funciones de transformación.</p> <p>Vamos a ver el ejemplo de un contenedor 3D que contiene un cuadrado turquesa al que aplicaremos algo de perspectiva (200 píxeles) y una rotación de 45 grados. De esta forma podremos visualizar mejor el resultado.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.contenedor3d</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">#ff7f2aaa</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="nx">#ff7f2a</span><span class="p">;</span> <span class="nl">display</span><span class="p">:</span> <span class="nb">inline-block</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="nl">transform-style</span><span class="p">:</span> <span class="nb">preserve-3d</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.escalarZ</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">perspective</span><span class="p">(</span><span class="m">200px</span><span class="p">)</span> <span class="nf">scaleZ</span><span class="p">(</span><span class="m">3</span><span class="p">)</span> <span class="nf">rotateX</span><span class="p">(</span><span class="m">45deg</span><span class="p">);</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .contenedor3d { background: #ff7f2aaa; border: 1px solid #ff7f2a; display: inline-block; font-weight: bold; height: 40px; line-height: 40px; text-align: center; transform-style: preserve-3d; width: 40px; } .escalarZ { transform: perspective(200px) scaleZ(3) rotateX(45deg); } </style> <blockquote> <div class="contenedor3d"><div class="contenido">A</div></div> <div class="contenedor3d separa"><div class="contenido escalarZ">R</div></div> </blockquote> <p class="notice-info">Tal y como se puede observar en este ejemplo, el caso de la derecha está en perspectiva y rota 45 grados a partir de un eje horizontal centrado. El escalado se aplica a través del eje de la profundidad. Con 0 grados de rotación no podríamos visualizarlo, ya que quedaría paralelo al plano 2D.</p> <h2 id="la-función-scale3d">La función ‘scale3d()’</h2> <p>La función <code class="highlighter-rouge">scale3d()</code> unifica las funciones de escalado de los ejes X, Y y Z, permitiendo realizar operaciones de escalado en un espacio 3D. También se usa como valor de la propiedad CSS <code class="highlighter-rouge">transform</code>.</p> <p>Esta función permite el escalado en los tres ejes, por tanto admite tres parámetros. Cada parámetro será un valor numérico decimal que determina el factor de crecimiento o decrecimiento de cada eje; en orden: X, Y y Z. Esto implica que se puede indicar factores de escalado en tres sentidos diferentes.</p> <p>El siguiente ejemplo aplica un escalado de -0.8 en el eje horizontal, 0.8 en el eje vertical y 5 en el eje de la profundidad. Se le da una rotación de 20 grados, una perspectiva de 200 píxeles y se cambia la posición del punto de origen.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.escalar3d</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">perspective</span><span class="p">(</span><span class="m">200px</span><span class="p">)</span> <span class="nf">scale3d</span><span class="p">(</span><span class="m">-0.8</span><span class="p">,</span> <span class="m">0.8</span><span class="p">,</span> <span class="m">5</span><span class="p">)</span> <span class="nf">rotateX</span><span class="p">(</span><span class="m">20deg</span><span class="p">);</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .escalar3d { transform-origin: top; transform: perspective(200px) scale3d(-0.8, 0.8, 5) rotateX(20deg); } </style> <blockquote> <div class="contenedor3d"><div class="contenido">A</div></div> <div class="contenedor3d separa"><div class="contenido escalar3d">R</div></div> </blockquote> <p class="notice-info">En el caso de la derecha, el punto de rotación está arriba del todo, por lo que el cuadrado turquesa rota 20 grados a partir de la arista superior.</p> <h2 id="la-propiedad-scale">La propiedad ‘scale’</h2> <p>La propiedad CSS <code class="highlighter-rouge">scale</code> permite crear transformaciones de escalado de forma independiente, sin tener que usar la propiedad de transformación <code class="highlighter-rouge">transform</code>. A pesar de que escala elementos en un espacio tridimensional, su uso puede ser un poco diferente respecto al de la función <code class="highlighter-rouge">scale3d()</code>.</p> <p>Esta propiedad admite uno, dos o tres valores, siendo <code class="highlighter-rouge">none</code> el valor por defecto, con el que no se aplicará escalado en ninguno de los tres ejes. A continuación se muestra las diferentes posibilidades para indicar valores.</p> <p><strong>Un valor</strong>: permite realizar un escalado simétrico en los ejes 2D (X e Y), por lo que incrementa o decrementa el elemento de un plano 2D. Si el valor es mayor que 1 o 100%, el objeto crece; y si es inferior, el objeto se encoge.</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.un-valor</span> <span class="p">{</span> <span class="nl">scale</span><span class="p">:</span> <span class="m">150%</span><span class="p">;</span> <span class="nl">scale</span><span class="p">:</span> <span class="m">0.8</span><span class="p">;</span> <span class="nl">scale</span><span class="p">:</span> <span class="m">3.25</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p><strong>Dos valores</strong>: indican el factor de escalado de los ejes horizontal (X) y vertical (Y), en ese orden. Si los dos factores de escalado son diferentes, el elemento se deformará, es decir, que perderá su proporción original.</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.dos-valores</span> <span class="p">{</span> <span class="nl">scale</span><span class="p">:</span> <span class="m">20%</span> <span class="m">50%</span><span class="p">;</span> <span class="nl">scale</span><span class="p">:</span> <span class="m">0.7</span> <span class="m">2.5</span><span class="p">;</span> <span class="nl">scale</span><span class="p">:</span> <span class="m">25%</span> <span class="m">1.5</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p><strong>Tres valores</strong>: indican el factor de escalado en los tres ejes de un espacio 3D: X, Y y Z, en ese orden. El funcionamiento es idéntico al de la función <code class="highlighter-rouge">scale3d()</code>, aunque en este caso, los tres valores se separan con un espacio en blanco.</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.tres-valores</span> <span class="p">{</span> <span class="nl">scale</span><span class="p">:</span> <span class="m">20%</span> <span class="m">50%</span> <span class="m">112%</span><span class="p">;</span> <span class="nl">scale</span><span class="p">:</span> <span class="m">0.7</span> <span class="m">2.5</span> <span class="m">0.8</span><span class="p">;</span> <span class="nl">scale</span><span class="p">:</span> <span class="m">50%</span> <span class="m">60%</span> <span class="m">70%</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p>En el siguiente ejemplo simplemente aplicamos un factor de escalado en el plano 2D, con un factor de crecimiento del 1.5 en el eje horizontal (X) y un factor de decrecimiento del 0.75 en el eje vertical (Y).</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.prop-escalar</span> <span class="p">{</span> <span class="nl">scale</span><span class="p">:</span> <span class="m">1.5</span> <span class="m">0.75</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .prop-escalar { scale: 1.5 0.75; } </style> <blockquote> <div class="contenedor3d"><div class="contenido">A</div></div> <div class="contenedor3d separa"><div class="contenido prop-escalar">R</div></div> </blockquote>RecursivosEl escalado consiste en cambiar el tamaño de un objeto, ya sea haciéndolo más grande o más pequeño, sin alterar su posición ni su orientación originales. La transformación de escalado se realiza a partir de un punto de referencia, que por defecto será el centro geométrico del elemento en cuestión.CSS: Rotación2024-02-20T00:00:00+00:002024-02-20T00:00:00+00:00https://recursivos.com/css/rotacion<p>La <strong>rotación</strong> consiste en modificar la orientación de un objeto alrededor de un centro de rotación específico, sin que eso conlleve una alteración de su posición ni de su tamaño. Esto implica girar el objeto alrededor de un eje, un ángulo determinado, que puede ser en cualquiera de las siguientes unidades: grados (<code class="highlighter-rouge">deg</code>), grados centesimales (<code class="highlighter-rouge">grad</code>), radianes (<code class="highlighter-rouge">rad</code>) o vueltas (<code class="highlighter-rouge">turn</code>).</p> <p>En CSS, puede rotarse elementos a partir de una serie de funciones que se usan como valor de la propiedad de <a href="/css/transformaciones/">transformación</a> <code class="highlighter-rouge">transform</code>. Las rotaciones pueden realizarse en cualquiera de los tres ejes de un espacio de tres dimensiones. También existe una propiedad CSS específica: <code class="highlighter-rouge">rotate</code>.</p> <p>Algunas funciones permiten rotar elementos en los dos ejes de un plano en 2D y otras permiten rotar elementos en un espacio 3D. La tabla siguiente contiene una lista completa de las funciones relativas a la rotación:</p> <table> <thead> <tr> <th style="text-align: left">Función</th> <th style="text-align: left">Descripción</th> </tr> </thead> <tbody> <tr> <td style="text-align: left"><code class="highlighter-rouge">rotateX()</code></td> <td style="text-align: left">Rota el elemento a través del eje horizontal (X).</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">rotateY()</code></td> <td style="text-align: left">Rota el elemento a través del eje vertical (Y).</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">rotateZ()</code></td> <td style="text-align: left">Rota el elemento a través de la profundidad (Z).</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">rotate()</code></td> <td style="text-align: left">Rota el elemento sobre sí mismo.</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">rotate3d()</code></td> <td style="text-align: left">Abreviatura para rotar en los tres ejes (X, Y, Z).</td> </tr> </tbody> </table> <p>Por defecto, el centro de rotación es el centro geométrico de los elementos, pero se puede modificar con la propiedad CSS <code class="highlighter-rouge">transform-origin</code>.</p> <h2 id="la-función-rotatex">La función ‘rotateX()’</h2> <p>La función <code class="highlighter-rouge">rotateX()</code> es utilizada como valor de la propiedad CSS <code class="highlighter-rouge">transform</code> y permite rotar un elemento a través del eje horizontal. Como consecuencia de la rotación, se verá un poco achatado verticalmente. Con una rotación de 180 grados, el elemento quedaría invertido en vertical, de cara abajo.</p> <p>El parámetro de <code class="highlighter-rouge">rotateX()</code> será un valor en unidades de ángulo. El elemento rotará siempre de arriba a abajo. El punto de rotación está en el eje horizontal (X), que por defecto se encuentra centrado al elemento en cuestión.</p> <p>Para visualizar un ejemplo, creamos un contenedor cuadrado de color naranja, y en su interior colocaremos otro elemento, del mismo tamaño, de color turquesa, que rotaremos 60 grados.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.contenedor</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">#ff7f2aaa</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="nx">#ff7f2a</span><span class="p">;</span> <span class="nl">display</span><span class="p">:</span> <span class="nb">inline-block</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.contenido</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">teal</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.rotarX</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">rotateX</span><span class="p">(</span><span class="m">60deg</span><span class="p">);</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .contenedor { background: #ff7f2aaa; border: 1px solid #ff7f2a; display: inline-block; height: 40px; font-weight: bold; line-height: 40px; text-align: center; width: 40px; } .contenido { background: teal; height: 40px; width: 40px; } .rotarX { transform: rotateX(60deg); } .separa { margin-left: 35px; } </style> <blockquote> <div class="contenedor"><div class="contenido">A</div></div> <div class="contenedor separa"><div class="contenido rotarX">R</div></div> </blockquote> <p class="notice-info">En el caso origen (izquierda), el objeto turquesa está sin rotar, mientras que en el segundo caso, este objeto ha rotado 60 grados, por eso se ve más chato. Si lo rotáramos 90 grados, quedaría de perfil y no se vería, pues no tiene espesor. Girándolo 180 grados quedaría invertido verticalmente.</p> <h2 id="la-función-rotatey">La función ‘rotateY()’</h2> <p>La función <code class="highlighter-rouge">rotateY()</code> se utiliza como valor de la propiedad CSS <code class="highlighter-rouge">transform</code>. Con esta propiedad es posible rotar un elemento a través del eje vertical, como si se tratara de una puerta giratoria. Con una rotación de 180 grados se vería invertido horizontalmente, como si se tratara de un espejo.</p> <p>El parámetro de <code class="highlighter-rouge">rotateY()</code> será un valor en unidades de ángulo. El elemento rotará siempre de derecha a izquierda. Por defecto, el punto de rotación está en el eje vertical (Y), que se encuentra centrado al elemento.</p> <p>En el siguiente ejemplo haremos lo mismo que en el ejemplo anterior, pero esta vez la rotación se realizará a través de un eje vertical.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.rotarY</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">rotateY</span><span class="p">(</span><span class="m">60deg</span><span class="p">);</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .rotarY { transform: rotateY(60deg); } </style> <blockquote> <div class="contenedor"><div class="contenido">A</div></div> <div class="contenedor separa"><div class="contenido rotarY">R</div></div> </blockquote> <p class="notice-info">En el caso de la izquierda, el objeto turquesa carece de rotación. En el de la derecha, el objeto está rotado verticalmente 60 grados y se ve más estrecho. A los 90 grados estaría de perfil y sería invisible porque no tiene espesor. A los 180 grados estaría invertido horizontalmente.</p> <h2 id="la-función-rotatez">La función ‘rotateZ()’</h2> <p>La función <code class="highlighter-rouge">rotateZ()</code> se utiliza como valor de la propiedad CSS <code class="highlighter-rouge">transform</code>, y está diseñada para rotar específicamente un elemento a través del plano Z de un espacio 3D. En cambio, si se trabaja en un plano 2D, esta función rotará el elemento sobre sí mismo, de la misma forma que la función <code class="highlighter-rouge">rotate()</code>.</p> <p>Al igual que ocurre con los ejes X e Y, esta función admite un único parámetro, cuyo valor será numérico en unidades de ángulo. Si es positivo, el elemento rotará en el sentido de las agujas del reloj, y si es negativo rotará en el sentido inverso. Por defecto, el punto de rotación es el centro geométrico del elemento.</p> <p>A continuación mostramos un ejemplo similar a los anteriores, pero esta vez rotando el elemento interior, de color turquesa, a través del eje de la profundidad (Z), que es un pequeño punto centrado al elemento.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.rotarZ</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">rotateZ</span><span class="p">(</span><span class="m">60deg</span><span class="p">);</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .rotarZ { transform: rotateZ(60deg); } </style> <blockquote> <div class="contenedor"><div class="contenido">A</div></div> <div class="contenedor separa"><div class="contenido rotarZ">R</div></div> </blockquote> <p class="notice-info">En este ejemplo se puede apreciar que el elemento ha rotado sobre sí mismo, a partir de un eje que es perpendicular a nuestro punto de vista.</p> <h2 id="la-función-rotate">La función ‘rotate()’</h2> <p>La función <code class="highlighter-rouge">rotate()</code> permite definir un tipo de rotación en la que el elemento gira sobre sí mismo. El efecto visual es muy similar al que obtendríamos rotando un objeto a través de su eje Z, el de la profundidad, con la propiedad <code class="highlighter-rouge">rotateZ()</code>, pero en este caso se evita que haya ningún tipo de deformación.</p> <p>El único parámetro que admite la función <code class="highlighter-rouge">rotate()</code> es un valor numérico que mide un ángulo. Si se introduce un valor positivo, el elemento rotará en el sentido de las agujas del reloj; y si es negativo, rotará en el sentido inverso. Una rotación de 180 grados dejará el elemento invertido verticalmente.</p> <p>En este ejemplo de la función <code class="highlighter-rouge">rotate()</code> vamos a rotar un elemento sobre sí mismo, indicando que queremos girarlo 20 grados en sentido opuesto.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.rotar</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">rotate</span><span class="p">(</span><span class="m">-20deg</span><span class="p">);</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .rotar { transform: rotate(-20deg); } </style> <blockquote> <div class="contenedor"><div class="contenido">A</div></div> <div class="contenedor separa"><div class="contenido rotar">R</div></div> </blockquote> <p class="notice-info">Tal y como se puede apreciar, el resultado es muy similar al que obtuvimos con la función <code class="highlighter-rouge">rotateZ()</code>. Sin embargo, en este caso estamos rotando un elemento sobre sí mismo, mientras que la otra función permite forzar una rotación en el eje de la Z cuando se trabaja con espacios 3D.</p> <h2 id="la-función-rotate3d">La función ‘rotate3d()’</h2> <p>La función <code class="highlighter-rouge">rotate3d()</code> es una abreviatura (<em>shorthand</em>) que unifica las funciones CSS relativas a la rotación específica para los ejes horizontal (X), vertical (Y) y de profundidad (Z). Por tanto, permite rotar objetos en un espacio 3D.</p> <p>En un espacio tridimensional, la rotación tiene tres grados de libertad, que de forma conjunta describen un ángulo de rotación. Por esta razón, la función <code class="highlighter-rouge">rotate3d()</code> admite cuatro parámetros: tres son referentes a un factor de rotación para cada uno de los ejes, y el cuarto se refiere al ángulo deseado.</p> <p>Este método de definición es más flexible de lo que parece, aunque no sea muy intuitivo a primera vista. Vamos a ver algunos ejemplos de uso.</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.ejemplos</span> <span class="p">{</span> <span class="c">/* Rota 70 grados en X */</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">rotate3d</span><span class="p">(</span><span class="m">1</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">70deg</span><span class="p">);</span> <span class="c">/* Rota 45 grados en Y y Z */</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">rotate3d</span><span class="p">(</span><span class="m">0</span><span class="p">,</span> <span class="m">1</span><span class="p">,</span> <span class="m">1</span><span class="p">,</span> <span class="m">45deg</span><span class="p">);</span> <span class="c">/* Rota 80 grados en X, Y y Z */</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">rotate3d</span><span class="p">(</span><span class="m">1</span><span class="p">,</span> <span class="m">1</span><span class="p">,</span> <span class="m">1</span><span class="p">,</span> <span class="m">80deg</span><span class="p">);</span> <span class="c">/* Rota 40 grados en X, 80 en Y y 160 en Z */</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">rotate3d</span><span class="p">(</span><span class="m">0.5</span><span class="p">,</span> <span class="m">1</span><span class="p">,</span> <span class="m">2</span><span class="p">,</span> <span class="m">80deg</span><span class="p">);</span> <span class="p">}</span> </code></pre></div></div> <p>En el siguiente ejemplo vamos a rotar el cuadrado de color turquesa en los tres ejes. En concreto, 60 grados en los ejes X e Y, y -30 grados en el eje Z. También vamos a crear un contenedor 3D, es decir, usando la propiedad <code class="highlighter-rouge">transform-style</code> con el valor <code class="highlighter-rouge">preserve-3d</code>, así visualizaremos mejor la rotación.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.contenedor3d</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">#ff7f2aaa</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="nx">#ff7f2a</span><span class="p">;</span> <span class="nl">display</span><span class="p">:</span> <span class="nb">inline-block</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="nl">transform-style</span><span class="p">:</span> <span class="nb">preserve-3d</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.rotar3d</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">rotate3d</span><span class="p">(</span><span class="m">1</span><span class="p">,</span> <span class="m">1</span><span class="p">,</span> <span class="m">-0.5</span><span class="p">,</span> <span class="m">60deg</span><span class="p">);</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .contenedor3d { background: #ff7f2aaa; border: 1px solid #ff7f2a; display: inline-block; font-weight: bold; height: 40px; line-height: 40px; text-align: center; transform-style: preserve-3d; width: 40px; } .rotar3d { transform: rotate3d(1, 1, -0.5, 60deg); } </style> <blockquote> <div class="contenedor3d"><div class="contenido">A</div></div> <div class="contenedor3d separa"><div class="contenido rotar3d">R</div></div> </blockquote> <p class="notice-info">El vector de rotación ha dejado nuestro cuadrado turquesa inclinado en los tres ejes, por lo que se ve un poco deformado y medio escondido por debajo del plano del elemento contenedor.</p> <h2 id="la-propiedad-rotate">La propiedad ‘rotate’</h2> <p>La propiedad CSS <code class="highlighter-rouge">rotate</code> permite especificar transformaciones de rotación de forma independiente, sin tener que usar la propiedad <code class="highlighter-rouge">transform</code>, ya que es una propiedad en sí misma. Aunque también rota elementos en un espacio 3D, se utiliza de forma diferente respecto a la función <code class="highlighter-rouge">rotate3d()</code>.</p> <p>Esta propiedad admite uno, dos o cuatro valores, siendo <code class="highlighter-rouge">none</code> el valor por defecto, con el que no se aplica ninguna transformación de rotación. A continuación se muestra las diferentes posibilidades para especificar valores.</p> <p><strong>Un valor</strong>: se puede introducir un único valor numérico y decimal que estará en unidades de medida de ángulo. El resultado es equivalente a rotar el elemento a través del eje Z, como si estuviéramos usando <code class="highlighter-rouge">rotateZ()</code>.</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.un-valor</span> <span class="p">{</span> <span class="nl">rotate</span><span class="p">:</span> <span class="m">45deg</span><span class="p">;</span> <span class="nl">rotate</span><span class="p">:</span> <span class="m">1.2turn</span><span class="p">;</span> <span class="nl">rotate</span><span class="p">:</span> <span class="m">3rad</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p><strong>Dos valores</strong>: permiten especificar el eje que queremos usar (X, Y o Z) y el ángulo que queremos aplicar. A diferencia del anterior, en este caso podemos indicar un eje del espacio tridimensional. El valor será numérico.</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.dos-valores</span> <span class="p">{</span> <span class="nl">rotate</span><span class="p">:</span> <span class="nb">x</span> <span class="m">20deg</span><span class="p">;</span> <span class="nl">rotate</span><span class="p">:</span> <span class="nb">y</span> <span class="m">4.2turn</span><span class="p">;</span> <span class="nl">rotate</span><span class="p">:</span> <span class="nb">z</span> <span class="m">0.5rad</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p><strong>Cuatro valores</strong>: en este caso, el funcionamiento es idéntico al de la función <code class="highlighter-rouge">rotate3d()</code>. En los tres primeros valores se indica un factor de rotación, y en el cuarto valor se indica el ángulo deseado.</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.cuatro-valores</span> <span class="p">{</span> <span class="nl">rotate</span><span class="p">:</span> <span class="m">0.5</span> <span class="m">1.2</span> <span class="m">2.4</span> <span class="m">30deg</span><span class="p">;</span> <span class="nl">rotate</span><span class="p">:</span> <span class="m">1</span> <span class="m">2</span> <span class="m">3</span> <span class="m">2rad</span><span class="p">;</span> <span class="nl">rotate</span><span class="p">:</span> <span class="m">0</span> <span class="m">1</span> <span class="m">2</span> <span class="m">5grad</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p>Vamos a ver un ejemplo de contenedor 3D indicando una rotación de -45 grados en los ejes horizontal (X) y vertical (Y); sin rotación en profundidad (Z).</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.prop-rotar</span> <span class="p">{</span> <span class="nl">rotate</span><span class="p">:</span> <span class="m">1</span> <span class="m">1</span> <span class="m">0</span> <span class="m">-45deg</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .prop-rotar { rotate: 1 1 0 -45deg; } </style> <blockquote> <div class="contenedor3d"><div class="contenido">A</div></div> <div class="contenedor3d separa"><div class="contenido prop-rotar">R</div></div> </blockquote>RecursivosLa rotación consiste en modificar la orientación de un objeto alrededor de un centro de rotación específico, sin que eso conlleve una alteración de su posición ni de su tamaño. Esto implica girar el objeto alrededor de un eje, un ángulo determinado, que puede ser en cualquiera de las siguientes unidades: grados (deg), grados centesimales (grad), radianes (rad) o vueltas (turn).CSS: Traslación2024-02-19T00:00:00+00:002024-02-19T00:00:00+00:00https://recursivos.com/css/traslacion<p>La <strong>traslación</strong> consiste en desplazar un objeto de una ubicación a otra en un espacio concreto, sin alterar su orientación ni su tamaño. En términos matemáticos, es como si estuviéramos modificando las coordenadas del elemento en un espacio que puede ser bidimensional o tridimensional.</p> <p>En CSS, la traslación de objetos puede realizarse a partir de la propiedad de <a href="/css/transformaciones/">transformación</a> <code class="highlighter-rouge">transform</code> junto con una serie de funciones que permiten trabajar tanto en un plano de dos dimensiones como en un espacio de tres dimensiones. Además, también puede usarse la propiedad CSS <code class="highlighter-rouge">translate</code>.</p> <p>Algunas funciones permiten trasladar elementos en 2D y otras permiten trasladarlos a través de los tres ejes, en 3D. A continuación se muestra una lista completa de las funciones relativas al desplazamiento o traslación:</p> <table> <thead> <tr> <th style="text-align: left">Función</th> <th style="text-align: left">Descripción</th> </tr> </thead> <tbody> <tr> <td style="text-align: left"><code class="highlighter-rouge">translateX()</code></td> <td style="text-align: left">Traslada el elemento a través del eje horizontal (X).</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">translateY()</code></td> <td style="text-align: left">Traslada el elemento a través del eje vertical (Y).</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">translate()</code></td> <td style="text-align: left">Abreviatura para la traslación en 2D (X, Y).</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">translateZ()</code></td> <td style="text-align: left">Traslada el elemento a través de la profundidad (Z).</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">translate3d()</code></td> <td style="text-align: left">Abreviatura para la traslación en 3D (X, Y, Z).</td> </tr> </tbody> </table> <p>Por defecto, el punto de traslación es el centro geométrico de los elementos, pero se puede modificar con la propiedad CSS <code class="highlighter-rouge">transform-origin</code>.</p> <h2 id="la-función-translatex">La función ‘translateX()’</h2> <p>La función <code class="highlighter-rouge">translateX()</code> se utiliza como valor de la propiedad CSS <code class="highlighter-rouge">transform</code> y permite desplazar horizontalmente un elemento, desde una ubicación a otra, siguiendo el eje X de un plano de dos dimensiones.</p> <p>Como parámetro, esta función admite un valor numérico que puede ser en unidades de longitud o porcentaje. Si el valor es positivo, el elemento será desplazado hacia la derecha, y si es negativo se moverá hacia la izquierda.</p> <p>Vamos a crear un contenedor cuadrado de lado 40 píxeles, y en su interior colocamos otro elemento cuadrado, del mismo tamaño, pero de color turquesa. Desplazamos el objeto turquesa 20 píxeles a la derecha.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.contenedor</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">#ff7f2aaa</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="nx">#ff7f2a</span><span class="p">;</span> <span class="nl">display</span><span class="p">:</span> <span class="nb">inline-block</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.contenido</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">teal</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.trasladarX</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">translateX</span><span class="p">(</span><span class="m">20px</span><span class="p">);</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .contenedor { background: #ff7f2aaa; border: 1px solid #ff7f2a; display: inline-block; font-weight: bold; height: 40px; line-height: 40px; text-align: center; width: 40px; } .contenido { background: teal; height: 40px; width: 40px; } .trasladarX { transform: translateX(20px); } .separa { margin-left: 35px; } </style> <blockquote> <div class="contenedor"><div class="contenido">A</div></div> <div class="contenedor separa"><div class="contenido trasladarX">R</div></div> </blockquote> <p class="notice-info">Tal y como se puede ver, en el caso base (izquierda), el objeto turquesa está centrado respecto el contenedor, mientras que en el segundo caso, este objeto se ha movido 20 píxeles a la derecha.</p> <h2 id="la-función-translatey">La función ‘translateY()’</h2> <p>La función <code class="highlighter-rouge">translateY()</code> también está pensada para usarse como valor de la propiedad CSS <code class="highlighter-rouge">transform</code>. En este caso, permite desplazar un elemento de forma vertical, es decir, a través del eje Y de un plano de dos dimensiones.</p> <p>Esta función también admite un único parámetro como valor, que debe ser un valor numérico que represente una longitud, en unidades relativas o absolutas, permitiendo el uso de porcentajes. Cuando el valor es positivo se desplaza el elemento hacia abajo, y si es negativo se traslada hacia arriba.</p> <p>Vamos a ver un ejemplo similar al anterior, pero esta vez trasladando el elemento hijo, de color turquesa, 7 píxeles hacia abajo.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.trasladarY</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">translateY</span><span class="p">(</span><span class="m">7px</span><span class="p">);</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .trasladarY { transform: translateY(7px); } </style> <blockquote> <div class="contenedor"><div class="contenido">A</div></div> <div class="contenedor separa"><div class="contenido trasladarY">R</div></div> </blockquote> <p class="notice-info">En el caso base (izquierda), se puede ver el objeto turquesa centrado a su elemento contenedor, mientras que en el segundo caso (derecha), el objeto turquesa se ha trasladado 7 píxeles abajo.</p> <h2 id="la-función-translate">La función ‘translate()’</h2> <p>La función <code class="highlighter-rouge">translate()</code> es una abreviatura (<em>shorthand</em>) de las dos funciones que permiten indicar el desplazamiento en los ejes horizontal (X) y vertical (Y). Esta función es ideal para resumir código cuando se trabaja en 2D. También debe usarse como valor de la propiedad CSS <code class="highlighter-rouge">transform</code>.</p> <p>Al tratarse de una abreviatura, la función <code class="highlighter-rouge">translate()</code> admite dos parámetros. El primero indica el desplazamiento en el eje horizontal, y en el segundo en el eje vertical. Admite valores numéricos de longitud y porcentajes. En el caso de usar un único parámetro, será el horizontal y el otro será de 0 píxeles.</p> <p>En el siguiente ejemplo vamos a trasladar el elemento hijo 15 píxeles hacia la izquierda y 5 píxeles hacia arriba. Por tanto, usaremos valores negativos en los dos parámetros que representan los dos ejes del plano bidimensional. En esencia, es como indicar coordenadas en un plano cartesiano.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.trasladar</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">translate</span><span class="p">(</span><span class="m">-15px</span><span class="p">,</span> <span class="m">-5px</span><span class="p">);</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .trasladar { transform: translate(-15px, -5px); } </style> <blockquote> <div class="contenedor"><div class="contenido">A</div></div> <div class="contenedor separa"><div class="contenido trasladar">R</div></div> </blockquote> <p class="notice-info">¿Lo ves? El objeto de color turquesa ahora se ha trasladado hacia la izquierda y hacia arriba, según las dos distancias indicadas en píxeles.</p> <h2 id="la-función-translatez">La función ‘translateZ()’</h2> <p>Para poder realizar una traslación en el eje de la profundidad (Z) hay que usar la función <code class="highlighter-rouge">translateZ()</code>. Pero para que funcione, hay que usar la propiedad <code class="highlighter-rouge">transform-style</code> con el valor <code class="highlighter-rouge">preserve-3d</code>, así los elementos hijos del contenedor se posicionarán en un espacio tridimensional.</p> <p>La función <code class="highlighter-rouge">translateZ()</code> admite un parámetro como valor; debe ser un valor numérico en unidades de longitud. Si el valor es positivo, el elemento se acerca hacia el plano del observador, y si es negativo se aleja.</p> <p class="notice-warning">A diferencia de los ejes horizontal (X) y vertical (Y), el eje de la profundidad (Z) no admite valores numéricos en forma de porcentaje.</p> <p>En este ejemplo alejaremos el cuadrado turquesa habitual la distancia de 1 píxel en el eje Z, por lo que se esconderá detrás del cuadrado naranja del contenedor.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.contenedor3d</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">#ff7f2aaa</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="nx">#ff7f2a</span><span class="p">;</span> <span class="nl">display</span><span class="p">:</span> <span class="nb">inline-block</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="nl">transform-style</span><span class="p">:</span> <span class="nb">preserve-3d</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.trasladarZ</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">translateZ</span><span class="p">(</span><span class="m">-1px</span><span class="p">);</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .contenedor3d { background: #ff7f2aaa; border: 1px solid #ff7f2a; height: 40px; display: inline-block; font-weight: bold; line-height: 40px; text-align: center; transform-style: preserve-3d; width: 40px; } .trasladarZ { transform: translateZ(-1px); } </style> <blockquote> <div class="contenedor3d"><div class="contenido">A</div></div> <div class="contenedor3d separa"><div class="contenido trasladarZ">R</div></div> </blockquote> <p class="notice-info">En el caso de la izquierda, sin traslación, el cuadrado turquesa todavía se ve por delante del cuadrado naranja, mientras que en el caso de la derecha, el cuadrado turquesa está escondido justo detrás del contenedor.</p> <h2 id="la-función-translate3d">La función ‘translate3d()’</h2> <p>La función <code class="highlighter-rouge">translate3d()</code> es una abreviatura (<em>shorthand</em>) de las funciones referentes a los ejes X, Y y Z. Por lo tanto, permite indicar el desplazamiento en un espacio de tres dimensiones. Esta función sintetiza código cuando se trabaja en 3D, y también debe usarse como valor de la propiedad CSS <code class="highlighter-rouge">transform</code>.</p> <p>Para que funcione el eje Z referente a la profundidad, también hay que usar la propiedad <code class="highlighter-rouge">transform-style</code> con el valor <code class="highlighter-rouge">preserve-3d</code>. De lo contrario, todos los elementos hijos quedaría integrados en un plano bidimensional.</p> <p>A diferencia de todas las funciones anteriores, <code class="highlighter-rouge">translate3d()</code> admite tres parámetros. El primero permite indicar la traslación en horizontal, el segundo en vertical y el tercero en el eje de la profundidad, en ese orden. Los tres ejes admiten valores numéricos, y solo los dos primeros admiten porcentajes.</p> <p>Si se introduce un único parámetro, se aplicará una traslación en el eje horizontal. Con dos parámetros se estará indicando la traslación en horizontal y en vertical. Y con tres parámetros, el orden es el siguiente: ejes X, Y y Z. Cuando falta uno o dos parámetros, se les aplicará el valor 0 (sin traslación).</p> <p>Vamos a ver un ejemplo en el que trasladaremos el elemento hijo a través de los tres ejes. Lo vamos a desplazar -15 píxeles hacia la izquierda, 5 píxeles abajo y -1 píxel hacia el fondo, por lo que una parte quedará escondida.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.trasladar3d</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">translate3d</span><span class="p">(</span><span class="m">-15px</span><span class="p">,</span> <span class="m">5px</span><span class="p">,</span> <span class="m">-1px</span><span class="p">);</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .trasladar3d { transform: translate3d(-15px, 5px, -1px); } </style> <blockquote> <div class="contenedor3d"><div class="contenido">A</div></div> <div class="contenedor3d separa"><div class="contenido trasladar3d">R</div></div> </blockquote> <p class="notice-info">El hecho de que el contenedor de color naranja sea un poco transparente permite visualizar el elemento turquesa que ha quedado medio escondido debido a que se encuentra en un plano de profundidad posterior.</p> <h2 id="la-propiedad-translate">La propiedad ‘translate’</h2> <p>La propiedad CSS <code class="highlighter-rouge">translate</code> es muy similar a la función <code class="highlighter-rouge">translate3d()</code>, pero con la ventaja de poder usarla como propiedad en vez de ser un valor de la propiedad <code class="highlighter-rouge">transform</code>. Por tanto, esta propiedad permite aplicar una traslación a través de los tres ejes del espacio tridimensional.</p> <p>El valor por defecto de la propiedad <code class="highlighter-rouge">translate</code> es <code class="highlighter-rouge">none</code>; no se aplica ninguna traslación. Esta propiedad CSS admite uno, dos o tres valores. A continuación se indica las diferentes combinaciones que pueden realizarse.</p> <p><strong>Un valor</strong>: permite realizar el desplazamiento del elemento en el eje horizontal (X). El valor debe ser numérico y debe indicar unidades de longitud.</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.un-valor</span> <span class="p">{</span> <span class="nl">translate</span><span class="p">:</span> <span class="m">10px</span><span class="p">;</span> <span class="nl">translate</span><span class="p">:</span> <span class="m">2cm</span><span class="p">;</span> <span class="nl">translate</span><span class="p">:</span> <span class="m">3em</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p><strong>Dos valores</strong>: permiten indicar el desplazamiento a través de los ejes X e Y de un plano 2D. Los dos valores se separan con un espacio en blanco.</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.dos-valores</span> <span class="p">{</span> <span class="nl">translate</span><span class="p">:</span> <span class="m">20px</span> <span class="m">-5px</span><span class="p">;</span> <span class="nl">translate</span><span class="p">:</span> <span class="m">4pt</span> <span class="m">3px</span><span class="p">;</span> <span class="nl">translate</span><span class="p">:</span> <span class="m">8px</span> <span class="m">50%</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p><strong>Tres valores</strong>: permiten desplazar un elemento a través de los tres ejes de un espacio tridimensional (3D): X, Y y Z, en ese orden.</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.tres-valores</span> <span class="p">{</span> <span class="nl">translate</span><span class="p">:</span> <span class="m">3px</span> <span class="m">5px</span> <span class="m">8px</span><span class="p">;</span> <span class="nl">translate</span><span class="p">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">20px</span><span class="p">;</span> <span class="nl">translate</span><span class="p">:</span> <span class="m">2cm</span> <span class="m">0</span> <span class="m">4cm</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p class="notice-info">Se puede usar el valor <code class="highlighter-rouge">0</code> para indicar que no se quiere desplazar o mover el elemento a través de un eje determinado.</p> <p>En el siguiente ejemplo usamos la propiedad <code class="highlighter-rouge">translate</code> para trasladar un elemento 10 píxeles a la derecha, 5 arriba y -1 hacia el fondo.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.prop-trasladar</span> <span class="p">{</span> <span class="nl">translate</span><span class="p">:</span> <span class="m">10px</span> <span class="m">-5px</span> <span class="m">-1px</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .prop-trasladar { translate: 10px -5px -1px; } </style> <blockquote> <div class="contenedor3d"><div class="contenido">A</div></div> <div class="contenedor3d separa"><div class="contenido prop-trasladar">R</div></div> </blockquote>RecursivosLa traslación consiste en desplazar un objeto de una ubicación a otra en un espacio concreto, sin alterar su orientación ni su tamaño. En términos matemáticos, es como si estuviéramos modificando las coordenadas del elemento en un espacio que puede ser bidimensional o tridimensional.CSS: Transformaciones2024-02-18T00:00:00+00:002024-02-18T00:00:00+00:00https://recursivos.com/css/transformaciones<p>Las <strong>transformaciones en CSS</strong> son una poderosa herramienta que permite modificar la apariencia de los elementos en un documento HTML. Se puede desplazar, rotar, escalar y deformar elementos con el fin de crear <strong>efectos visuales</strong> más bonitos, lo cual permite mejorar la experiencia del usuario.</p> <p>Para transformar elementos se utiliza principalmente la propiedad CSS <code class="highlighter-rouge">transform</code>, que permite realizar tanto transformaciones en 2D como en 3D. Como valor acepta diferentes funciones que permiten hacer varios efectos visuales.</p> <table> <thead> <tr> <th style="text-align: left">Transformación</th> <th style="text-align: left">Descripción</th> </tr> </thead> <tbody> <tr> <td style="text-align: left"><a href="/css/transformaciones/#traslacion">Traslación</a></td> <td style="text-align: left">Desplaza un objeto de un lugar a otro.</td> </tr> <tr> <td style="text-align: left"><a href="/css/transformaciones/#rotacion">Rotación</a></td> <td style="text-align: left">Gira un objeto desde un punto de rotación.</td> </tr> <tr> <td style="text-align: left"><a href="/css/transformaciones/#escalado">Escalado</a></td> <td style="text-align: left">Modifica el tamaño de un objeto.</td> </tr> <tr> <td style="text-align: left"><a href="/css/transformaciones/#deformacion">Deformación</a></td> <td style="text-align: left">Inclina objetos a partir de un ángulo.</td> </tr> <tr> <td style="text-align: left"><a href="/css/transformaciones/#perspectiva">Perspectiva</a></td> <td style="text-align: left">Simula la profundidad en un objeto.</td> </tr> <tr> <td style="text-align: left"><a href="/css/transformaciones/#matrices">Matrices</a></td> <td style="text-align: left">Transforma arbitrariamente un objeto.</td> </tr> </tbody> </table> <p>Además de la propiedad <code class="highlighter-rouge">transform</code>, CSS también provee algunas propiedades específicas para personalizar las transformaciones.</p> <table> <thead> <tr> <th style="text-align: left">Propiedad</th> <th style="text-align: left">Descripción</th> </tr> </thead> <tbody> <tr> <td style="text-align: left"><code><a href="/css/transformaciones/#transform-origin" title="Propiedad 'transform-origin'">transform-origin</a></code></td> <td style="text-align: left">Cambia el origen de las transformaciones.</td> </tr> <tr> <td style="text-align: left"><code><a href="/css/transformaciones/#transform-style" title="Propiedad 'transform-style'">transform-style</a></code></td> <td style="text-align: left">Modifica el tipo de transformación (2D o 3D).</td> </tr> </tbody> </table> <p>Una de las grandes ventajas es que podemos combinar <a href="/css/transformaciones/#multiples">múltiples transformaciones</a> y animarlas utilizando el propio CSS o con ayuda de JavaScript (JS). Además, son compatibles con la mayoría de los navegadores web modernos, lo que garantiza una experiencia de usuario consistente entre varios dispositivos.</p> <h2 id="traslacion">Traslación</h2> <p>La traslación o desplazamiento de elementos se realiza mediante una serie de funciones que permiten mover un elemento tanto a nivel bidimensional (ejes horizontal y vertical) como a nivel tridimensional (profundidad).</p> <p>Para trasladar un elemento podemos usar la función <code class="highlighter-rouge">translate()</code>. Por ejemplo, vamos a crear un elemento cuadrado, y en esta función indicaremos un desplazamiento de 20 píxeles en horizontal y 5 píxeles en vertical.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.trasladar</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">teal</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">translate</span><span class="p">(</span><span class="m">20px</span><span class="p">,</span> <span class="m">10px</span><span class="p">);</span> <span class="nl">width</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .contenedor { border: 1px solid #ff7f2a; height: 40px; width: 40px; display: inline-block; } .trasladar { background: teal; height: 40px; transform: translate(20px, 10px); width: 40px; } </style> <blockquote> <div class="contenedor"><div class="trasladar"></div></div> </blockquote> <p>Aprende con más detalle la <a href="/css/traslacion/">traslación</a> de elementos con CSS.</p> <h2 id="rotacion">Rotación</h2> <p>En CSS también existe una serie de funciones específicas que permiten rotar elementos HTML en varios ejes; por lo que se pueden rotar tanto en dos dimensiones (2D) como en tres dimensiones (3D).</p> <p>Por ejemplo, podemos usar la función <code class="highlighter-rouge">rotate()</code> para rotar un elemento, y como parámetro de esta función se indica los grados de rotación deseados. Vamos a crear un elemento <code class="highlighter-rouge"><div></code> de forma cuadrada y lo rotamos 30 grados.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.rotar</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">teal</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">rotate</span><span class="p">(</span><span class="m">30deg</span><span class="p">);</span> <span class="nl">width</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .rotar { background: teal; height: 40px; transform: rotate(30deg); width: 40px; } </style> <blockquote> <div class="contenedor"><div class="rotar"></div></div> </blockquote> <p>Aprende con más detalle la <a href="/css/rotacion/">rotación</a> de elementos con CSS.</p> <h2 id="escalado">Escalado</h2> <p>Otra característica interesante de las transformaciones en CSS es que también es posible realizar un escalado de elementos HTML. También existe funciones CSS que permiten escalar elementos en horizontal, en vertical y en 3D.</p> <p>En este ejemplo vamos a escalar un cuadrado para que su tamaño sea de un 80% del total. Vamos a usar la función <code class="highlighter-rouge">scale()</code>, y como parámetro indicaremos el valor <code class="highlighter-rouge">0.8</code>, equivalente al 80% pero en tanto por uno.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.escalar</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">teal</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">scale</span><span class="p">(</span><span class="m">0.8</span><span class="p">);</span> <span class="nl">width</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .escalar { background: teal; height: 40px; transform: scale(0.8); width: 40px; } </style> <blockquote> <div class="contenedor"><div class="escalar"></div></div> </blockquote> <p>Aprende con más detalle el <a href="/css/escalado/">escalado</a> de elementos con CSS.</p> <h2 id="deformacion">Deformación</h2> <p>Más allá de las tres herramientas de transformación básicas como son la traslación, la rotación y el escalado, con CSS también es posible crear una deformación del elemento HTML. No obstante, solo se puede crear un sesgo en 2D.</p> <p>En el siguiente ejemplo vamos a deformar un cuadrado en el eje horizontal, y para ellos usaremos la función <code class="highlighter-rouge">skewX()</code>. El parámetro de esta función debe ser una unidad de ángulo, y asignaremos un valor de <code class="highlighter-rouge">20deg</code>.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.deformar</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">teal</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">skewX</span><span class="p">(</span><span class="m">20deg</span><span class="p">);</span> <span class="nl">width</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .deformar { background: teal; height: 40px; transform: skewX(20deg); width: 40px; } </style> <blockquote> <div class="contenedor"><div class="deformar"></div></div> </blockquote> <p>Aprende con más detalle la <a href="/css/deformacion/">deformación</a> de elementos con CSS.</p> <h2 id="perspectiva">Perspectiva</h2> <p>Cuando se trabaja con herramientas de transformación, puede ser necesario crear perspectivas para simular la profundidad y así mejorar la percepción tridimensional. Por tanto, CSS también ayuda a <strong>crear efectos visuales más realistas</strong>.</p> <p>Vamos a ver un ejemplo de perspectiva. Si tenemos un cuadrado y lo rotamos 45 grados por el eje vertical, veremos la arista más cercana más larga, y la arista más lejana más estrecha. Usaremos la función <code class="highlighter-rouge">perspective()</code> para definir la distancia de 60 píxeles entre el usuario y el plano Z, equivalente a 0.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.perspectiva</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">teal</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">perspective</span><span class="p">(</span><span class="m">60px</span><span class="p">)</span> <span class="nf">rotateY</span><span class="p">(</span><span class="m">45deg</span><span class="p">);</span> <span class="nl">width</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .perspectiva { background: teal; height: 40px; transform: perspective(60px) rotateY(45deg); width: 40px; } </style> <blockquote> <div class="contenedor"><div class="perspectiva"></div></div> </blockquote> <p>Aprende con más detalle la creación de <a href="/css/perspectiva/">perspectivas</a> con CSS.</p> <h2 id="matrices">Matrices</h2> <p>En CSS existe herramientas que permiten aplicar transformaciones arbitrarias a los elementos HTML. Pueden parecer complejas, pero son muy flexibles y brindan un control muy preciso sobre la posición, la rotación, el escalado y la perspectiva de los elementos que queramos transformar. Se trata de dos funciones para crear matrices de transformación: <code class="highlighter-rouge">matrix()</code> para 2D y <code class="highlighter-rouge">matrix3d()</code> para 3D.</p> <p>A continuación vamos a crear un ejemplo con una matriz de transformación en 2D. Esta función admite seis parámetros referentes a las siguientes operaciones: escalado en X, deformación en Y, deformación en X, escalado en Y, traslación en X y traslación en Y. El orden indicado debe ser tenido en cuenta.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.matriz</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">teal</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">matrix</span><span class="p">(</span><span class="m">0.7</span><span class="p">,</span> <span class="m">0.2</span><span class="p">,</span> <span class="m">0.2</span><span class="p">,</span> <span class="m">0.7</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">);</span> <span class="nl">width</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .matriz { background: teal; height: 40px; transform: matrix(0.7, 0.2, 0.2, 0.7, 0, 0); width: 40px; } </style> <blockquote> <div class="contenedor"><div class="matriz"></div></div> </blockquote> <p>Aprende con más detalle la creación de <a href="/css/matrices/">matrices</a> con CSS.</p> <h2 id="multiples">Múltiples transformaciones</h2> <p>La propiedad CSS <code class="highlighter-rouge">transform</code> permite aplicar <strong>múltiples transformaciones</strong> a un mismo elemento. Se deben introducir como valor separándolas con un espacio en blanco. Hay que tener en cuenta que se aplicarán según el orden que se indique; esto significa que el orden altera el resultado final.</p> <p>Imaginemos que queremos realizar una traslación y una rotación. Si primero movemos el objeto a la derecha, se moverá horizontalmente; y cuando lo rotemos, girará sobre su centro en esa posición desplazada.</p> <p>Pero si, por el contrario, primero lo rotamos 45 grados, sus ejes quedarán inclinados. Entonces, al querer desplazarlo no se moverá en horizontal, sino que se desplazará, en este caso hipotético, hacia la esquina inferior derecha.</p> <p>En el ejemplo siguiente vamos a crear otro elemento cuadrado, pero lo vamos a rotar 45 grados y le aplicaremos un factor de escalado del 50% para reducir su tamaño a la mitad. Pero se podría usar muchas más funciones a la vez.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.multiples</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">teal</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">rotate</span><span class="p">(</span><span class="m">45deg</span><span class="p">)</span> <span class="nf">scale</span><span class="p">(</span><span class="m">0.5</span><span class="p">);</span> <span class="nl">width</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .multiples { background: teal; height: 40px; transform: rotate(45deg) translate(50px); transform: translate(50px) rotate(45deg); width: 40px; } </style> <blockquote> <div class="contenedor"><div class="multiples"></div></div> </blockquote> <h2 id="transform-origin">La propiedad ‘transform-origin’</h2> <p>La propiedad CSS <code class="highlighter-rouge">transform-origin</code> permite <strong>modificar el punto de origen de las transformaciones</strong>. Esta propiedad admite tres parámetros como valor, relativos al plano horizontal (X), al plano vertical (Y) y al plano de la profundidad (Z), en caso de trabajar en 3D. Su valor inicial y por defecto es <code class="highlighter-rouge">50% 50% 0</code>.</p> <p>Los valores pueden ser introducidos como porcentaje o mediante valores absolutos en unidades de longitud. También se puede usar palabras clave para referirse a los extremos laterales (<code class="highlighter-rouge">left</code> y <code class="highlighter-rouge">right</code>), verticales (<code class="highlighter-rouge">top</code> y <code class="highlighter-rouge">bottom</code>) y centrado (<code class="highlighter-rouge">center</code>). En caso de no indicar profundidad, se le asignará <code class="highlighter-rouge">0</code>; esto significa que si se trabaja en 2D, se puede omitir el tercer parámetro sin problema.</p> <p>Vamos a crear un nuevo ejemplo con un cuadrado que vamos a escalar al 50%, pero modificando el punto de origen, indicando que debe situarse a al derecha del todo de la caja contenedora y centrado verticalmente.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.origen</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">teal</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">scale</span><span class="p">(</span><span class="m">0.5</span><span class="p">);</span> <span class="nl">transform-origin</span><span class="p">:</span> <span class="nb">right</span> <span class="nb">center</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .origen { background: teal; height: 40px; transform: scale(0.5); transform-origin: right center; width: 40px; } </style> <blockquote> <div class="contenedor"><div class="origen"></div></div> </blockquote> <h2 id="transform-style">La propiedad ‘transform-style’</h2> <p>La propiedad CSS <code class="highlighter-rouge">transform-style</code> permite establecer si los elementos hijos deben estar posicionados en un espacio 2D, quedando integrados en el espacio del elemento, o si deben estar posicionados en el espacio tridimensional. Por tanto, permite modificar el espacio dimensional de los elementos hijos.</p> <p>Esta propiedad puede tener los siguientes valores:</p> <table> <thead> <tr> <th style="text-align: left">valor</th> <th style="text-align: left">Descripción</th> </tr> </thead> <tbody> <tr> <td style="text-align: left"><code class="highlighter-rouge">flat</code></td> <td style="text-align: left">Los elementos hijos se integran en el plano 2D (por defecto).</td> </tr> <tr> <td style="text-align: left"><code class="highlighter-rouge">preserve-3d</code></td> <td style="text-align: left">Los elementos hijos se posicionan en un espacio 3D.</td> </tr> </tbody> </table> <p>Esta propiedad no se hereda sobre otros elementos. Esto significa que, en caso de que sea necesario, deberá indicarse de forma específica e individual el valor de <code class="highlighter-rouge">transform-style</code> sobre los elementos que le sean descendientes.</p> <p>Vamos a ver un par de ejemplos para comparar los valores <code class="highlighter-rouge">flat</code> y <code class="highlighter-rouge">preserve-3d</code>. El elemento contenedor (padre) es un plano cuadrado y naranja de 40 píxeles de lado, y el elemento hijo tiene las mismas dimensiones, pero es turquesa, está rotado 45 grados en el eje vertical y se encuentra en perspectiva.</p> <p>Código CSS:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.espacio2d</span><span class="o">,</span> <span class="nc">.espacio3d</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">#ff7f2a</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="nl">display</span><span class="p">:</span> <span class="nb">inline-block</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.espacio2d</span> <span class="p">{</span> <span class="nl">transform-style</span><span class="p">:</span> <span class="nb">flat</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.espacio3d</span> <span class="p">{</span> <span class="nl">transform-style</span><span class="p">:</span> <span class="nb">preserve-3d</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.hijo</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">teal</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">perspective</span><span class="p">(</span><span class="m">80px</span><span class="p">)</span> <span class="nf">rotateY</span><span class="p">(</span><span class="m">45deg</span><span class="p">);</span> <span class="nl">width</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p>Resultado:</p> <style> .espacio2d, .espacio3d { background: #ff7f2a; height: 40px; display: inline-block; width: 40px; } .espacio2d { transform-style: flat; } .espacio3d { margin-left: 30px; transform-style: preserve-3d; } .hijo { background: teal; height: 40px; transform: perspective(80px) rotateY(45deg); width: 40px; } </style> <blockquote> <div class="espacio2d"><div class="hijo"></div></div> <div class="espacio3d"><div class="hijo"></div></div> </blockquote> <p>En el primer ejemplo, el elemento padre (clase <code class="highlighter-rouge">espacio2d</code>) usa el valor <code class="highlighter-rouge">flat</code>. Se puede ver como el elemento hijo aparece de forma completa, quedando integrado en un contenedor que solo tiene dos dimensiones (plano 2D).</p> <p>En el segundo ejemplo, el elemento padre (clase <code class="highlighter-rouge">espacio3d</code>) usa el valor <code class="highlighter-rouge">preserve-3d</code>. En este caso, el elemento hijo se encuentra en un espacio 3D, por lo que su plano corta por el centro el del elemento contenedor.</p>RecursivosLas transformaciones en CSS son una poderosa herramienta que permite modificar la apariencia de los elementos en un documento HTML. Se puede desplazar, rotar, escalar y deformar elementos con el fin de crear efectos visuales más bonitos, lo cual permite mejorar la experiencia del usuario.