Efectos CSS para blogger propiedad transform

Para aquellos que están realizando sus primeras experiencias con CSS, dejo una serie de efectos valiéndose de la propiedad transform, que permite en 2D y 3D aplicar diferentes movimientos a un elemento, de esta manera lograremos entre otros rotar, desplazar, aumentar o disminuir y torcer un objeto.

Vamos a aplicar esta propiedad de la siguiente manera:

transform:translate(); 
transform:rotate();
transform:scale();

En la tabla puedes observar los diferentes parámetros que pueden tener las diferentes propiedades utilizadas.

En los efectos de la caja 4 estamos utilizando también la propiedad animation, que veremos en otra entrada en detalle. 
Pasando el mousse por sobre las cajas se pueden observar algunos efectos con los que puedes ir adornando tu blog!
Estos se pueden aplicar en la misma entrada que estés publicando haciendo uso de:

<style type="text/css"> TU CODIGO CSS </style><br />


Para ello recuerda incorporar estas lineas desde HTML y no en Redactar!

Claro que también podemos incorporar nuestro código CSS directamente a nuestra plantilla, con las modificaciones realizadas al editor de plantillas por la gente de Blogger esto es muy sencillo. 

Esta es una prueba de como funciona transform translate

Esta es una prueba de como funciona transform rotate

Esta es una prueba de como funciona transform skew

Esta es una prueba de como funciona animation

El código HTML

<div id="caja1">
                          <p class="texto">
                                                       Esta es una prueba de como funciona transform translate
                          </p>
</div>
<div id="caja2">
                         <p class="texto">
                                                       Esta es una prueba de como funciona transform rotate
                         </p>
</div>
<div id="caja3">
                        <p class="texto">
                                                      Esta es una prueba de como funciona transform skew
                        </p>
</div>
<div id="caja4">
                        <p class="texto">
                                                     Esta es una prueba de como funciona animation
                        </p>

</div>

El código CSS

.texto{font-family:Georgia, "Times New Roman", Times, serif;
font-size:18px;
font-style:oblique;
text-align:center;
color:#FFF;
font-weight:bold;
}
#caja1{width:200px;
height:100px;
box-shadow:10px 10px 5px #888888;
background-color:#066;
padding:3px;
position:relative;
}
#caja2{width:200px;
height:100px;
box-shadow:10px 10px 5px #888888;
background-color:#C00;
padding:3px;
position:relative;
}
#caja3{width:200px;
height:100px;
box-shadow:10px 10px 5px #888888;
background-color:#C93;
padding:3px;
position:relative;
}
#caja4{width:200px;
height:100px;
box-shadow:10px 10px 5px #888888;
background-color:#C63;
padding:3px;
position:relative;
}
#caja1:hover{
transform:translateX(100px);
-webkit-transform:translateX(100px);
-moz-transform:translateX(100px);
-o-transform:translateX(100px);
-ms-transform:translateX(100px);
}

#caja2:hover{
transform:rotate(270deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
}

#caja3:hover{
transform:skewX(-40deg);
-webkit-transform:skewX(-40deg);
-moz-transform:skewX(-40deg);
-o-transform:skewX(-40deg);
-ms-transform:skewX(-40deg);
}

#caja4:hover{
animation:mover 8s infinite alternate;
-webkit-animation:mover 8s infinite alternate;
-ms-animation:mover 8s infinite alternate;
-o-animation:mover 8s infinite alternate;
-moz-animation:mover 8s infinite alternate;
}

@keyframes "mover" {
0% {transform:translate(0px,0px);}

50% {background-color:#69F;
transform:translate(100px,100px);
opacity:0,3;}

100%{transform:scale(1.5,1,5);
opacity:0;}

}
@-webkit-keyframes "mover" {
0% {
-webkit-transform:translate(0px,0px);
}
50%{
-webkit-transform:translate(100px,100px);
background-color:#69F;

opacity:0,3;
}

100%{
-webkit-transform:scale(1.5,1.5);
opacity:0;
}
}

@-o-keyframes "mover" {
0% {
-o-transform:translate(0px,0px);
}
50%{
-o-transform:translate(100px,100px);
background-color:#69F;

opacity:0,3;
}

100%{
-o-transform:scale(1.5,1.5);
opacity:0;
}
}
@-moz-keyframes "mover" {
0% {
-moz-transform:translate(0px,0px);
}
50%{
-moz-transform:translate(100px,100px);
background-color:#69F;

opacity:0,3;
}

100%{
-moz-transform:scale(1.5,1.5);
opacity:0;
}
}

@-ms-keyframes "mover" {
0% {
-ms-transform:translate(0px,0px);
}
50%{
-ms-transform:translate(100px,100px);
background-color:#69F;

opacity:0,3;
}

100%{
-ms-transform:scale(1.5,1.5);
opacity:0;
}
}

Tweet