Efecto rotación en las imagenes con css IV

Si queremos ponerlo dentro de una página en html lo haremos dentro de las etiquetas correspondientes, de esta manera :

<style type="text/css">
...aqui el código css...
</style>

Para aplicar este efecto en tu blog de blogger ir a:

Plantilla ►Personalizar ►Diseñador de Plantillas ► Avanzado ► Añadir Código CSS Personalizado

pegamos el siguiente estilos css:

.rotacion-img-4 {
background:#FFF;
border: 1px solid #CCC;
line-height: 0;
margin: 4px;
padding: 4px;
-moz-transition: all 500ms linear 0s;
-ms-transition: all 500ms linear 0s;
-o-transition: all 500ms linear 0s;
-webkit-transition: all 500ms linear 0s;
transition: all 500ms linear 0s;
cursor:pointer;
}
.rotacion-img-4:hover {
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
transform:rotateY(180deg);
}

 El código HTML es el siguiente:

<img class="rotacion-img-4" src="URL de la imagen"/>

Leer más

Efecto flip con fotos en 3D con CSS3 I

Efecto flip con fotos en 3D con CSS3

Si queremos ponerlo dentro de una página en html lo haremos dentro de las etiquetas correspondientes, de esta manera :

<style type="text/css">
...aqui el código css...
</style>

debajo ponemos

<div class="flip">
<img src="Url de la Imagen" class="flip">
</div>

Para aplicar este efecto en tu blog de blogger ir a:
Plantilla ►Personalizar ►Diseñador de Plantillas ► Avanzado ► Añadir Código CSS Personalizado

pegamos el siguiente estilos css:

.flip{
position: relative;
transition: all 1s ease;
transform: perspective(600px);
transform-origin: 100% 50%;
transform-style: preserve-3d;
}
.flip:hover{
transform: perspective(600px) rotateY(-180deg) translateX(100%);
}

El código HTML es el siguiente:

<div class="flip">
<img src="Url de la Imagen" class="flip">
</div>

Leer más

Efecto rotación en las imagenes con css III

Si queremos ponerlo dentro de una página en html lo haremos dentro de las etiquetas correspondientes, de esta manera :

<style type="text/css">
...aqui el código css...
</style>

debajo ponemos

<img class="rotacion-img-3" src="URL de la imagen"/>

Para aplicar este efecto en tu blog de blogger ir a:

Plantilla ►Personalizar ►Diseñador de Plantillas ► Avanzado ► Añadir Código CSS Personalizado

pegamos el siguiente estilos css

.rotacion-img-3 {
background:#FFF;
border: 1px solid #CCC;
line-height: 0;
margin: 4px;
padding: 4px;
-moz-transition: all 500ms linear 0s;
-ms-transition: all 500ms linear 0s;
-o-transition: all 500ms linear 0s;
-webkit-transition: all 500ms linear 0s;
transition: all 500ms linear 0s;
cursor:pointer;
}
.rotacion-img-3:hover {
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-transform:rotateY(-90deg);
-ms-transform:rotateY(-90deg);
-o-transform:rotateY(-90deg);
-webkit-transform:rotateY(-90deg);
transform:rotateY(-90deg);
}

El código HTML es el siguiente:

<img class="rotacion-img-3" src="URL de la imagen"/>

Leer más

Efecto rotación en las imagenes con css II

Si queremos ponerlo dentro de una página en html lo haremos dentro de las etiquetas correspondientes, de esta manera :

<style type="text/css">
...aqui el código css...
</style>

debajo ponemos

<img class="rotacion-img-2" src="URL de la imagen"/>

Para aplicar este efecto en tu blog de blogger ir a:

Plantilla ►Personalizar ►Diseñador de Plantillas ► Avanzado ► Añadir Código CSS Personalizado

pegamos el siguiente estilos css:

.rotacion-img-2 {
background:#FFF;
border: 1px solid #CCC;
display: block;
line-height: 0;
margin: 4px;
padding: 4px;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
cursor:pointer;
}
.rotacion-img-2:hover {
-moz-transform:rotate(-360deg);
-webkit-transform:rotate(-360deg);
-o-transform:rotate(-360deg);
-ms-transform:rotate(-360deg);
transform:rotate(-360deg);
}

El código HTML es el siguiente:

<img class="rotacion-img-2" src="URL de la imagen"/>

Leer más

Efecto rotación en las imagenes con css I

Si queremos ponerlo dentro de una página en html lo haremos dentro de las etiquetas correspondientes, de esta manera :

<style type="text/css">
...aqui el código css...
</style>

debajo ponemos

<img class="rotacion-img-1" src="URL de la imagen"/>

Para aplicar este efecto en tu blog de blogger ir a:

Plantilla ►Personalizar ►Diseñador de Plantillas ► Avanzado ► Añadir Código CSS Personalizado

pegamos el siguiente estilos css:

.rotacion-img-1 {
background:#FFF;
border: 1px solid #CCC;
line-height: 0;
margin: 4px;
padding: 4px;
-moz-transition: all 1s linear 0s;
-ms-transition: all 1s linear 0s;
-o-transition: all 1s linear 0s;
-webkit-transition: all 1s linear 0s;
transition: all 1s linear 0s;
cursor:pointer;
}
.rotacion-img-1:hover {
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-transform:rotateY(360deg);
-ms-transform:rotateY(360deg);
-o-transform:rotateY(360deg);
-webkit-transform:rotateY(360deg);
transform:rotateY(360deg);
}

El código HTML es el siguiente:

<img class="rotacion-img-1" src="URL de la imagen"/>

Leer más