Transición y transformacion con CSS

Este ejemplo está basado en Original Hover Effects with CSS3, pero lo he resumido para que sea un poco más claro de entender principalmente para aquellos que no estén muy involucrados o que estén iniciando con CSS.

Entonces la cosa está así, como HTML tenemos la siguiente estructura:

<div>
    <img src=”sha.jpg” />
    <div>Mouse arriba</div>
    <div>
        <h2>Transición con CSS3</h2>
        <p>Transición y transformación con CSS3.</p>
        <a href=”http://a.uaslp.mx/e2CSs6z8“>Enlace original</a>
    </div>
</div>

El código anterior no involucra nada en especial, unos cuantos DIV, IMG, P, H2, A que son elementos básicos al estructurar un documento HTML.

Nota: Este ejemplo utiliza imagenes, dos para ser exactos, pueden hacer uso de cualquier imagen de su agrado, solo asegurense que tienen el tamaño apropiado para ser usadas, en este caso se usando de 200 x 15 pixeles.

Ahora vamos definiendo los estilos para cada uno de los elementos del documento HTML que se mostro anteriormente:

.vista{
/*Características generales del DIV*/

width: 200px;
height: 150px;
margin: 10px;   
float: left;   
border: 10px solid #fff;   
overflow: hidden;   
position: relative;    /*se especifica que la posicion sea relativa*/
text-align: center;
/*especificamos un sombreado al DIV*/

-webkit-box-shadow: 2px 2px 5px #000000;   
-moz-box-shadow: 2px 2px 5px #000000;   
box-shadow: 2px 2px 5px #000000;   
background: #FFFFFF url(bgpiel.jpg) no-repeat center center;
}

.vista .mascara {
/*Características generales del DIV máscara que quedará ocupará el mismo espacio*/

width: 200px;
height: 150px;
position: absolute;   
overflow: hidden;   
top: 0;   
left: 0;     
background-color: rgba(255, 231, 179, 0.3);
/*Se especifica el comportamiento en transición de todo el DIV*/

-webkit-transition: all 0.5s linear;   
-moz-transition: all 0.5s linear;   
-o-transition: all 0.5s linear;   
-ms-transition: all 0.5s linear;   
transition: all 0.5s linear;   
-ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=0)”;   
filter: alpha(opacity=0);   
opacity: 0;
}

.vista img {
display: block;   
position: relative;
/*se declara la apariencia de la imagen sin ningun evento, indicando su tamaño orignal (1)*/

-webkit-transform: scaleY(1);   
-moz-transform: scaleY(1);   
-o-transform: scaleY(1);   
-ms-transform: scaleY(1);   
transform: scaleY(1);
/*declaración de como se efecturará la transición de la IMG*/

-webkit-transition: all 0.7s ease-in-out;   
-moz-transition: all 0.7s ease-in-out;   
-o-transition: all 0.7s ease-in-out;   
-ms-transition: all 0.7s ease-in-out;   
transition: all 0.7s ease-in-out;
}

El DIV mascara contiene 3 elementos, un H2, un P y un A a los cuales tambien se les dan características de transición, para que tengan un movimiento propio e independiente del DIV máscara.

.vista h2 {   
text-transform: uppercase;   
color: #fff;   
text-align: center;   
position: relative;   
font-size: 14px;   
border-bottom: 1px solid rgba(0, 0, 0, 0.3);   
background: transparent;   
margin: 5px 20px 0px 20px;
/*Despues de las caractérísticas generales se especifica su transformación, en este caso se escalará*/

-webkit-transform: scale(0);   
-moz-transform: scale(0);   
-o-transform: scale(0);   
-ms-transform: scale(0);   
transform: scale(0);   
color: #333;
/*Se declara como será la transición de la transformación especificada.*/

-webkit-transition: all 0.5s linear;   
-moz-transition: all 0.5s linear;   
-o-transition: all 0.5s linear;   
-ms-transition: all 0.5s linear;   
transition: all 0.5s linear;
}

.vista .descripcion {  
font-family: Georgia, serif;  
font-style: italic;  
font-size: 12px;  
position: relative;  
color: #fff;  
padding: 10px 20px;  
text-align: center;  color: #333;
/*Una vez declaradas las características generales de P, se declara la transformación, en este caso como en el H2, se escalará*/

-webkit-transform: scale(0);  
-moz-transform: scale(0);
 -o-transform: scale(0);  
-ms-transform: scale(0);  
transform: scale(0);
/*Se declara la forma en que se realizará la transición del escalado para este elemento*/

-webkit-transition: all 0.5s linear;  
-moz-transition: all 0.5s linear;  
-o-transition: all 0.5s linear;  
-ms-transition: all 0.5s linear;  
transition: all 0.5s linear;
}

/*Para el elemento A, se hace básicamente lo mismo que para los elementos P y H2, declarar sus apariencia, su transformación y su transición*/
.vista a.info

{   
display: inline-block;   
text-decoration: none;   
padding: 7px 14px;   
background: #000;   
color: #fff;   
text-transform: uppercase;   
-webkit-box-shadow: 0 0 1px #000;   
-moz-box-shadow: 0 0 1px #000;   
box-shadow: 0 0 1px #000;      
-webkit-transform: scale(0);   
-moz-transform: scale(0);   
-o-transform: scale(0);   
-ms-transform: scale(0);   
transform: scale(0);   
-webkit-transition: all 0.5s linear;   
-moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
}

/*Por ultimo un elemento DIV que aparecerá posicionado arriba de la imagen, para la cual se parte del posicionamiento relativo (que es despues de la IMG) y apartir de ahí se reccorre 70px hacia arriba, para después especificar como será su transición. Para este elemento DIV comenzará con estar visible y al final de la transición será invisible*/
.vista .aviso {

  position:relative;
  top: -70px;
  background-color:#FFFFFF;
  -ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=.7)”;
     filter: alpha(opacity=.7);
     opacity: .7;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

Ahora, se declararán las características de los elementos de acuerdo a al reacción del mouse cuando se encuentre arriba de ellos (hover), estos conjuntos de estilos pueden considerarse como los puntos finales despues de la transición es decir, por ejemplo, si para el elemento IMG se especifico una transición y el hover de la imagen especifica que tendrá una escalado de 10, significa que la transición será de su tamaño original a un tamaño de 10 veces más.

Por lo tanto aqui no se especifican las transiciones, sino las caracteristicas de como será el elemento al final de la transición.

.vista a.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}

.vista:hover img {
   -webkit-transform: scale(10);
   -moz-transform: scale(10);
   -o-transform: scale(10);
   -ms-transform: scale(10);
   transform: scale(10);
   -ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=0)”;
   filter: alpha(opacity=0);
   opacity: 0;
}

.vista:hover .mascara {
   -ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=100)”;
   filter: alpha(opacity=100);
   opacity: 1;
}

.vista:hover h2, .vista:hover .descripcion, .vista:hover a.info {
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   -ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=100)”;
   filter: alpha(opacity=100);
   opacity: 1;
}

.vista:hover .aviso {
   -ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=0)”;
   filter: alpha(opacity=0);
   opacity: 0;

Con los elementos establecidos anteriormente tendrás un efecto interesante de presentación de información, sin necesidad de utilizar algun complemento de JS o cualquier variante, sólo HTML y CSS3.

Si este código lo colocas en una página web podrás ver su funcionamiento, sin embargo con sus respectivas limitantes, que ya se podrán imaginar cual es: IE no soporta hasta el momento las características de transición (para algunos esto es de esperarse). Sin embargo las características de opacidad, transformación si lo son por lo que, lo unico que no veremos es la transición de un estado a otro.

Descarga el ejemplo completo[19KB]

En la red encotrarás mucha información relativa a los atributos de transición, opacidad y transformación como en w3schools o desarrolloWeb, por mencionar algunos.

saludos

Igar

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Límite de tiempo se agote. Por favor, recargar el CAPTCHA por favor.