Propiedades CSS Transformación
17-08-2022

backface-visibility
perspective
perspective-origin
transform
transform-origin
transform-style

transition
transition-delay
transition-duration
transition-property
transition-timing-function

backface-visibility 17-08-2022

La propiedad backface-visibility define si un elemento debe ser visible cuando no está frente a la pantalla.

Esta propiedad es útil cuando se rota un elemento y no desea ver su parte trasera.

Valor por defecto: visible

Sintaxis: backface-visibility: visible | hidden | initial | inherit;

Valores de propiedad:

visible - Valor por defecto. La parte trasera es visible.
hidden - La parte trasera no es visible.
initial - Establece esta propiedad a su valor predeterminado.
inherit - Hereda esta propiedad de su elemento padre.

Nota: La propiedad backface-visibility no es compatible con Internet Explorer 9 y versiones anteriores.

backface-visibility: visible;

<html>
<head>
<style>
div#movil {
    width:200px; margin:40px auto; background:#f78989;
    position:relative; border:1px solid black;
    -webkit-animation:mymove 3s infinite; /* Chrome, Safari, Opera */
    animation:mymove 3s infinite;
    backface-visibility: visible;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
  from {-webkit-transform: rotateY(0deg);}
  to {-webkit-transform: rotateY(360deg);}
}
@keyframes mymove {
  from {transform: rotateY(0deg);}
  to {transform: rotateY(360deg);}
}
</style>
</head>
<body>
<div id="movil">
    <h2>Texto ejemplo</h2>
</div>
</body>
</html>

backface-visibility: visible;

Arriba ... ⇑

perspective 17-08-2022

Especifica la perspectiva de cómo se ven los elementos 3D

La propiedad perspective define cuántos píxeles un elemento 3D se coloca desde la vista. Esta propiedad le permite cambiar la perspectiva de cómo se ven los elementos 3D.

Al definir la propiedad perspective para un elemento, son los elementos pequeños los que obtienen la vista en perspectiva, NO el elemento mismo.

Nota: ¡La propiedad perspective sólo afecta a elementos transformados en 3D!

Sugerencia: utilice esta propiedad junto con la propiedad perspective-origin que le permite cambiar la posición inferior de los elementos 3D.

La propiedad perspective está soportada en IE10 + y Firefox.

Chrome, Safari y Opera soportan una alternativa, la propiedad -webkit-perspective.

Valor por defecto: none

Sintaxis: perspective: longitud | none | initial | inherit;

Valores de propiedad:

longitud - Hasta qué punto se coloca el elemento desde la vista.
none - Valor por defecto. Igual que 0. La perspectiva no está definida.
initial - Establece esta propiedad a su valor predeterminado.
inherit - Hereda esta propiedad de su elemento padre.

perspective: none;

<html>
<head>
<style>
#div1 {
    position:relative; height:150px; width:250px;
    margin:25px auto; border:1px solid black;
    perspective: none;
}
#div2 {
    padding:25px; position:absolute;
    border:1px solid black; background-color:red;
    -webkit-transform:rotateX(45deg);
    transform:rotateX(45deg);
    font-size:30px;
    font-weight:bold;
    box-sizing:border-box;width:90%;left:10px;
    text-align:center;
}
</style>
</head>
<body>
<div id="div1">
  <div id="div2">Texto de ejemplo</div>
</div>
</body>
</html>

perspective:
none;

Arriba ... ⇑

perspective-origin 17-08-2022

Especifica la posición inferior de los elementos 3D

La propiedad perspective-origin define dónde se basa un elemento 3D en los ejes x y y. Esta propiedad le permite cambiar la posición inferior de los elementos 3D.

Al definir la propiedad perspective-origin de un elemento, son los elementos hijo que se posicionan, NO el elemento mismo.

Nota: Esta propiedad debe ser utilizada junto con la propiedad perspective y sólo afecta a los elementos transformados en 3D.

Valor por defecto: 50% 50%

Sintaxis: perspective-origin: eje-x eje-y | initial | inherit;

Valores de propiedad:

eje-x - Definir dónde se coloca la vista en el eje x. Valor por defecto: 50%. Posibles valores:
- left
- center
- right
- longitud
- %
eje-y - Definición de la ubicación de la vista en el eje y. Valor por defecto: 50%. Posibles valores:
- top
- center
- bottom
- longitud
- %
initial - Establece esta propiedad a su valor predeterminado.
inherit - Hereda esta propiedad de su elemento padre.

La propiedad perspective-origin es compatible con IE10 + y Firefox. Chrome, Safari y Opera soportan una alternativa, la propiedad -webkit-perspecitve-origin.

perspective-origin: 50% 50%;

<html>
<head>
<style>
#div1 {
    position:relative; height:150px; width:250px;
    margin:25px auto; border:1px solid black;
    perspective:150px;
    perspective-origin: 50% 50%;
}
#div2 {
    padding:25px; position:absolute;
    border:1px solid black; background-color:red;
    -webkit-transform:rotateX(45deg);
    transform:rotateX(45deg);
    font-size:30px;
    font-weight:bold;
    box-sizing:border-box;width:90%;left:10px;
    text-align:center;
}
</style>
</head>
<body>
<div id="div1">
  <div id="div2">Texto de ejemplo</div>
</div>
</body>
</html>

perspective-origin:

perspective-origin:
50% 50%;

Arriba ... ⇑

transform 17-08-2022

La propiedad transform aplica una transformación 2D o 3D a un elemento. Esta propiedad le permite rotar, escalar, mover, sesgar, etc., elementos.

Nota: Internet Explorer 8 y versiones anteriores no admiten la propiedad transform. Internet Explorer 9 admite una alternativa, la propiedad -ms-transform. Las versiones más recientes de IE admiten la propiedad transform (no necesita el prefijo ms). Chrome, Safari y Opera soportan una alternativa, la propiedad -webkit-transform.

Valor por defecto: none

Sintaxis: transform: none | Funciones-de-transformación | initial | inherit;

Valores de propiedad:

none - Define que no debe haber transformación.
matrix(n,n,n,n,n,n) - Define una transformación 2D, utilizando una matriz de seis valores.
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) - Define una transformación 3D, utilizando una matriz 4x4 de 16 valores.
translate(x,y) - Define una traducción 2D.
translate3d(x,y,z) - Define una traducción 3D.
translateX(x) - Define una traducción, utilizando sólo el valor para el eje X.
translateY(y) - Define una traducción, utilizando sólo el valor para el eje Y.
translateZ(z) - Define una traducción 3D, utilizando sólo el valor para el eje Z.
scale(x,y) - Define una transformación de escala 2D.
scale3d(x,y,z) - Define una transformación de escala 3D.
scaleX(x) - Define una transformación de escala proporcionando un valor para el eje X.
scaleY(y) - Define una transformación de escala proporcionando un valor para el eje Y.
scaleZ(z) - Define una transformación de escala 3D dando un valor para el eje Z.
rotate(ángulo) - Define una rotación 2D, el ángulo se especifica en el parámetro.
rotate3d(x,y,z,ángulo) - Define una rotación 3D.
rotateX(ángulo) - Define una rotación 3D a lo largo del eje X.
rotateY(ángulo) - Define una rotación 3D a lo largo del eje Y.
rotateZ(ángulo) - Define una rotación 3D a lo largo del eje Z.
skew(x-ángulo,y-ángulo) - Define una transformación de inclinación 2D a lo largo de los ejes X y Y.
skewX(ángulo) - Define una transformación de sesgo 2D a lo largo del eje X.
skewY(ángulo) - Define una transformación de inclinación 2D a lo largo del eje Y.
perspective(n) - Define una vista en perspectiva de un elemento transformado 3D.
initial - Establece esta propiedad a su valor predeterminado.
inherit - Hereda esta propiedad de su elemento padre.

transform: none;

<html>
<head>
<style>
#div1 {
    position:relative; height:300px; width:300px;
    margin:25px auto; border:1px solid black;
}
#div2 {
    position:absolute; box-sizing:border-box;
    width:250px; height: 100px; margin:30% 7%;
    background-color:#fad178; font-size: 22px;
    font-weight:bold; border-radius:20px;
    padding:20px; text-align:center;
    transform: none;
}
</style>
</head>
<body>
<div id="div1">
  <div id="div2">Texto de ejemplo</div>
</div>
</body>
</html>

transform:

transform:
none;

Arriba ... ⇑

transform-origin 17-08-2022

Permite cambiar la posición de elementos transformados

Las transformaciones 2D pueden cambiar los ejes x e y de un elemento. Las transformaciones 3D también pueden cambiar el eje z de un elemento.

Esta propiedad debe utilizarse junto con la propiedad transform.

Nota: Internet Explorer 8 y versiones anteriores no admiten la propiedad transform-origin. Internet Explorer 9 admite una propiedad alternativa -ms-transform-origin. Las versiones más recientes de IE admiten la propiedad transform-origin (no necesita el prefijo ms). Chrome, Safari y Opera soportan una alternativa, la propiedad -webkit-transform-origin.

Valor por defecto: 50% 50% 0

Sintaxis: transform-origin: eje-x eje-y eje-z | initial | inherit;

Valores de propiedad:

eje-x - Define dónde se coloca la vista en el eje x. Valores posibles:
- left
- center
- right
- longitud
- %
eje-y - Define dónde se coloca la vista en el eje y. Valores posibles:
- top
- center
- bottom
- longitud
- %
eje-z - Define dónde se coloca la vista en el eje z (para transformaciones en 3D). Valores posibles:
- longitud
initial - Establece esta propiedad a su valor predeterminado.
inherit - Hereda esta propiedad de su elemento padre.

transform-origin: 50% 50% 0;

<html>
<head>
<style>
#div1 {
    position:relative; height:100px; width:250px;
    margin:100px auto; border:1px solid black;
}
#div2 {
    position:absolute; box-sizing:border-box;
    width:250px; height: 100px; margin:30% 7%;
    background-color:#fad178; font-size: 22px;
    font-weight:bold; border-radius:20px;
    padding:20px; text-align:center;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    -ms-transform-origin: 50% 50% 0; /* IE 9 */
    -webkit-transform-origin: 50% 50% 0; /* Chrome, Safari, Opera */
    transform-origin: 50% 50% 0;
}
</style>
</head>
<body>
<div id="div1">
  <div id="div2">Texto de ejemplo</div>
</div>
</body>
</html>

transform:

transform-origin:
50% 50% 0;

Arriba ... ⇑

transform-style 17-08-2022

Especifica cómo se renderizan los elementos anidados en el espacio 3D. Esta propiedad debe utilizarse junto con la propiedad transform.

Nota: Internet Explorer 10 y versiones anteriores no admiten la propiedad transform-style. Chrome, Safari y Opera soportan una alternativa, la propiedad -webkit-transform-style.

Valor por defecto: flat

Sintaxis: transform-style: flat | preserve-3d | initial | inherit;

Valores de propiedad:

flat - Especifica que los elementos secundarios NO conservarán su posición 3D. Esto es el predeterminado.
preserve-3d - Especifica que los elementos secundarios conservarán su posición 3D.
initial - Establece esta propiedad a su valor predeterminado.
inherit - Hereda esta propiedad de su elemento padre.

transform-style: flat;

<html>
<head>
<style>
#div1 {
    position:relative; height:200px; width:300px;
    margin:50px auto; border:1px solid black;
    padding:10px;
}
#div2 {
    position:absolute; box-sizing:border-box;
    padding:50px; background-color:red;
    -webkit-transform: rotateY(60deg);
    transform: rotateY(60deg);
    transform-style: flat;
}
#div3 {
    padding:40px; position:absolute; width:250px;
    box-sizing:border-box; border:1px solid black;
    background-color:yellow; text-align:center;
    -webkit-transform: rotateY(-60deg);
    transform: rotateY(-60deg);
}
</style>
</head>
<body>
<div id="div1">
    <div id="div2">transform-style
        <div id="div3">flat</div>
    </div>
</div>
</body>
</html>

transform-style

flat

Arriba ... ⇑

transition 17-08-2022

La propiedad de transition es una propiedad abreviada para las cuatro propiedades de transición:

transition-property
transition-duration
transition-timing-function
transition-delay

Siempre especifique la propiedad transition-duration de lo contrario la duración es 0s, y la transición no tendrá ningún efecto.

Valor por defecto: all 0s ease 0s

Sintaxis: transition: property duration timing-function delay | initial | inherit;

Valores de propiedad:

transition-property - Especifica el nombre de la propiedad CSS para el efecto de transición.
transition-duration - Especifica el número de segundos o milisegundos que tarda el efecto de transición en completarse.
transition-timing-function - Especifica la curva de velocidad del efecto de transición.
transition-delay - Define cuándo comenzará el efecto de transición.
initial - Establece esta propiedad a su valor predeterminado.
inherit - Hereda esta propiedad de su elemento padre.

transition: none

<html>
<head>
<style>
div#trans1{
    background-color:red; height:100px; width:100px;
    -webkit-transition: none; /* Safari 3.1 to 6.0 */
    transition: none;
}
div#trans1:hover { width:100%; }
</style>
</head>
<body>
<div>
    <p>Texto</p>
    <div id="trans1">Texto</div>
</div>
</body>
</html>

Pose el cursor sobre el elemento rojo, para ver el efecto de transición.

none

transition: none

<html>
<head>
<style>
input[type=text] { width: 100px;
    -webkit-transition: none; /* Safari 3.1 to 6.0 */
    transition: none;
}
input[type=text]:focus { width:300px; background:#BDF8B6; }
</style>
</head>
<body>
<div>
    <p>Texto</p>
    <div>Buscar: <input type="text" name="buscar"></div>
</div>
</body>
</html>

Establezca el ancho del campo de entrada en 100 píxeles. Sin embargo, cuando el campo de entrada obtiene el foco, haga 300 pixels de ancho:

Buscar:

Arriba ... ⇑

transition-property 17-08-2022

La propiedad transition-property especifica el nombre de la propiedad CSS para el efecto de transición (el efecto de transición se iniciará cuando cambie la propiedad CSS especificada).

Sugerencia: Un efecto de transición típicamente podría ocurrir cuando un usuario se cierne sobre un elemento.

Nota: Siempre especifique la propiedad de transition-duration, de lo contrario la duración es 0, y la transición no tendrá ningún efecto.

Valor por defecto: all

Sintaxis: transition-property: none | all | propiedad | initial | inherit;

none - Ninguna propiedad obtendrá un efecto de transición.
all - Valor por defecto. Todas las propiedades obtendrán un efecto de transición.
propiedad - Define una lista separada por comas de nombres de propiedades CSS cuyo efecto de transición es.
initial - Establece esta propiedad a su valor predeterminado.
inherit - Hereda esta propiedad de su elemento padre.

transition-property: all

<html>
<head>
<style>
div#trans1{
    height:100px; width:100px; background-color:red;
    -webkit-transition-duration:2s; /* Safari */
    transition-duration:2s;
    -webkit-transition-property: all; /* Safari */
    transition-property: all;
}
div#trans1:hover { height:200px; width:350px; }
</style>
</head>
<body>
<div>
    <p>Texto</p>
    <div id="trans1">Texto</div>
</div>
</body>
</html>

Pose el cursor sobre el elemento rojo, para ver el efecto de transición.

all

Arriba ... ⇑

transition-duration 17-08-2022

La propiedad transition-duration especifica cuántos segundos (s) o milisegundos (ms) toma un efecto de transición para completar.

Valor por defecto: 0s

Sintaxis: transition-duration: tiempo | initial | inherit;

Valores de propiedad:

tiempo - Especifica el número de segundos o milisegundos que un efecto de transición tarda en completarse. El valor predeterminado es 0s, lo que significa que no habrá efecto.
initial - Establece esta propiedad a su valor predeterminado.
inherit - Hereda esta propiedad de su elemento padre.

transition-duration: 0s

<html>
<head>
<style>
div#trans4{
    height:100px; width:100px; background-color:red;
    -webkit-transition-property: width; /* Safari */
    transition-property: width;
    -webkit-transition-duration: 0s; /* Safari */
    transition-duration: 0s;
}
div#trans4:hover { height:200px; width:350px; }
</style>
</head>
<body>
<div>
    <p>Texto</p>
    <div id="trans4">Texto</div>
</div>
</body>
</html>

Pose el cursor sobre el elemento rojo, para ver el efecto de transición.

all

Nota: Este ejemplo no funciona en Internet Explorer 9 y versiones anteriores.

Arriba ... ⇑

transition-timing-function 17-08-2022

La propiedad transition-timing-function especifica la curva de velocidad del efecto de transición.

Esta propiedad permite un efecto de transición para cambiar la velocidad sobre su duración.

Valor por defecto: ease

Valores de propiedad:

linear - Especifica un efecto de transición con la misma velocidad de principio a fin (equivalente a cubic-bezier (0,0,1,1)).
ease - Valor por defecto. Especifica un efecto de transición con un arranque lento, luego rápido, y luego termina lentamente (equivalente a cubic-bezier (0.25,0.1,0.25,1)).
ease-in - Especifica un efecto de transición con un arranque lento (equivalente a cubic-bezier (0.42,0,1,1)).
ease-out - Especifica un efecto de transición con un final lento (equivalente a cubic-bezier (0,0,0.58,1))
ease-in-out - Especifica un efecto de transición con un inicio y fin lentos (equivalente a cubic-bezier (0.42,0,0.58,1)).
step-start - Equivalente a las etapas (1, start (inicio)).
step-end - Equivalente a las etapas (1, end (final)).
steps(int,start|end) - Especifica una función paso a paso, con dos parámetros. El primer parámetro especifica el número de intervalos en la función. Debe ser un entero positivo (mayor que 0). El segundo parámetro, que es opcional, es el valor "start" o "end", y especifica el punto en el que ocurre el cambio de valores dentro del intervalo. Si se omite el segundo parámetro, se le da el valor "end"
cubic-bezier(n,n,n,n) - Defina sus propios valores en la función cúbico-bezier. Los valores posibles son valores numéricos de 0 a 1.
initial - Establece esta propiedad a su valor predeterminado.
inherit - Hereda esta propiedad de su elemento padre.

transition-timing-function: ease

<html>
<head>
<style>
div#trans5{
    height:100px; width:100px; background-color:red;
    font-weight: bold;
    -webkit-transition-property: width, height; /* Safari */
    transition-property: width, height;
    -webkit-transition-duration: 2s; /* Safari */
    transition-duration: 2s;
    -webkit-transition-timing-function: ease; /* Safari */
    transition-timing-function: ease;
}
div#trans5:hover { height:200px; width:350px; }
</style>
</head>
<body>
<div>
    <p>Texto</p>
    <div id="trans5">Texto</div>
</div>
</body>
</html>

Pose el cursor sobre el elemento rojo, para ver el efecto de transición.

ease

Nota: Este ejemplo no funciona en Internet Explorer 9 y versiones anteriores.

Arriba ... ⇑

transition-delay 17-08-2022

La propiedad transition-delay especifica cuándo se iniciará el efecto de transición.

El valor del retardo de transición se define en segundos (s) o milisegundos (ms).

No funciona en Internet Explorer 9 y versiones anteriores.

Valor por defecto: 0s

Sintaxis: transition-delay: tiempo | initial | inherit;

Valores de propiedad:

tiempo - Especifica el número de segundos o milisegundos que debe esperar antes de que se inicie el efecto de transición.
initial - Establece esta propiedad a su valor predeterminado.
inherit - Hereda esta propiedad de su elemento padre.

transition-delay: 0s

<html>
<head>
<style>
div#trans2{
    height:100px; width:100px; background-color:red;
    -webkit-transition: width 5s; /* Safari */
    transition: width 5s;
    -webkit-transition-delay: 0s; /* Safari */
    transition-delay: 0s;
}
div#trans2:hover { width:350px; }
</style>
</head>
<body>
<div>
    <p>Texto</p>
    <div id="trans2">Texto</div>
</div>
</body>
</html>

Pose el cursor sobre el elemento rojo, para ver el efecto de transición.
Iniciará en 0segundo

Nota: Este ejemplo no funciona en Internet Explorer 9 y versiones anteriores.

transition-delay: 0s

<html>
<head>
<style>
input[type=text] { width: 100px;
    -webkit-transition: width 5s; /* Safari 3.1 to 6.0 */
    transition: width 5s;
    -webkit-transition-delay: 0s; /* Safari */
    transition-delay: 0s;
}
input[type=text]:focus { width:250px; background:#BDF8B6; }
</style>
</head>
<body>
<div>
    <p>Texto</p>
    <div>Buscar: <input type="text" name="buscar"></div>
</div>
</body>
</html>

Pose el cursor sobre el elemento rojo, para ver el efecto de transición.
Cuando el campo de entrada obtiene el foco, alcanza 250 pixels de ancho, con un retardo de arranque de 0segundo

Buscar:

Nota: Este ejemplo no funciona en Internet Explorer 9 y versiones anteriores.

Arriba ... ⇑

Propiedades CSS Transformación17-08-2022

backface-visibility 17-08-2022

backface-visibility: visible;

backface-visibility: visible;

perspective 17-08-2022

perspective: none;

perspective-origin 17-08-2022

perspective-origin: 50% 50%;

transform 17-08-2022

transform: none;

transform-origin 17-08-2022

transform-origin: 50% 50% 0;

transform-style 17-08-2022

transform-style: flat;

transition 17-08-2022

transition: none

transition: none

transition-property 17-08-2022

transition-property: all

transition-duration 17-08-2022

transition-duration: 0s

transition-timing-function 17-08-2022

transition-timing-function: ease

transition-delay 17-08-2022

transition-delay: 0s

transition-delay: 0s

Propiedades CSS Transformación
17-08-2022