Bueno siguiendo con las imagenes y como darle un toque especial y movimiento para hacerlas mas llamativas e atractivas a tu pagina o blog de blogger.En esta ocasion te mostrare como anadirle un efecto con Css3 este es darle una vuelta a la imagen en (180 360 y 90 grados) en su eje.Este truco es una transicion y una trnsformacion en 3D.
Mira el siguiente ejemplo:RotateY
Este es una asombrosa exposicion para explicar la imagen
Cualquier contenido puede ir aqui.
Cualquier contenido puede ir aqui.
Pongamosle que quieres que la foto o imagen a rotar en su eje 90 grados.También puede girar alrededor de los ejes X y Z, cambiando rotateY a RotateX o RotateZ.
Ejemplo Imagen en RotateX :
Note que he cambiado la sombra para mantenerlo normal.
Pongamosle que quieres que la foto o imagen a rotar en su eje 360 grados.También puede girar alrededor de los ejes X y Z, cambiando rotateY a RotateX o RotateZ.
Ejemplo Imagen en RotateZ :
Este es una asombrosa exposicion para explicar la imagen
Cualquier contenido puede ir aqui.
Cualquier contenido puede ir aqui.
Comto aplicamos este efecto 3D de Rotacion Con Css3 a tu blog.
1.Entra en tu Blogger.
2.Escoge el Blog donde vas a poner este efecto y da cliccal al mismo.
3.Busca donde dice Plantilla>>Editar Html
4.Busca el siguiente codigo ]]</b:skin> copia y pega el siguiente codigo arriba/encima de ]]</b:skin>
Escoge aquel codigo segun la rotacion que deseas Rotacion Y y lo pegas arriba de
]]</b:skin>
Codigo 1 Imagen Rotar en Y.
#f1_container { position: relative; margin: 10px auto; width: 450px; height: 281px; z-index: 1; } #f1_container { perspective: 1000; } #f1_card { width: 100%; height: 100%; transform-style: preserve-3d; transition: all 1.0s linear; } #f1_container:hover #f1_card { transform: rotateY(180deg); box-shadow: -5px 5px 5px #aaa; } .face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; } .face.back { display: block; transform: rotateY(180deg); box-sizing: border-box; padding: 10px; color: white; text-align: center; background-color: #aaa; }
Codigo 2 Imagen Rotar en X
#f2_container {
position: relative;
margin: 10px auto;
width: 450px;
height: 281px;
z-index: 1;
}
#f2_container {
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
}
#f2_card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 1.0s linear;
-moz-transform-style: preserve-3d;
-moz-transition: all 1.0s linear;
-o-transform-style: preserve-3d;
-o-transition: all 1.0s linear;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#f2_container:hover #f2_card, #f2_container.hover_effect #f2_card {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
-webkit-box-shadow: 5px -5px 5px #aaa;
-moz-box-shadow: 5px -5px 5px #aaa;
box-shadow: 5px -5px 5px #aaa;
}
Codigo 3 Imagen Rotar en Z
#f2_container {5.Dan Click a guardar plantilla.
position: relative;
margin: 10px auto;
width: 450px;
height: 281px;
z-index: 1;
}
#f2_container {
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
}
#f2_card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 1.0s linear;
-moz-transform-style: preserve-3d;
-moz-transition: all 1.0s linear;
-o-transform-style: preserve-3d;
-o-transition: all 1.0s linear;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#f2_container:hover #f2_card, #f2_container.hover_effect #f2_card {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
-webkit-box-shadow: 5px -5px 5px #aaa;
-moz-box-shadow: 5px -5px 5px #aaa;
box-shadow: 5px -5px 5px #aaa;
}
6.Puedes anadir el efecto a una imagen utilizando la sigueinte etiqueta Div de la siguiente forma:
Div a Usarse con Rotate X:
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<img src="http://www.fondosytemas.com/wp-content/uploads/Windows_7_Broken_Glass_Desktop-450x281.jpg"/>
</div>
<div class="back face center">
<p>Este es una asombrosa exposicion para explicar la imagen</p>
<p>Cualquier contenido puede ir aqui.</p>
</div>
</div>
</div>
Div Ha Usarse con Rotate Y:
<div id="f2_container" class="hover">
<div id="f2_card" class="shadow">
<div class="front face">
<img src="http://www.fondosytemas.com/wp-content/uploads/funny_monkey_business-1280x800-450x281.jpg">
</div>
<div class="back face center">
<p>Note que he cambiado la sombra para mantenerlo normal.</p>
</div>
</div>
</div>
Div Ha Usarse con Rotate Z:
<div id="f3_container" class="hover">
<div id="f3_card" class="shadow">
<div class="front face">
<img src="http://www.fondosytemas.com/wp-content/uploads/02377_downtownseattletwilight_1920x1200-450x281.jpg">
</div>
<div class="back face center">
<p>Este es una asombrosa exposicion para explicar la imagen</p>
<p>Cualquier contenido puede ir aqui.</p>
</div>
</div>
</div>
Nota:Lo que esta marcado en rojo es la imagen- ahi pondras tu imagen deseada.Lo que esta sobreado en azul -ahi va la informacion que desees poner sobre la imagen.Deberas ajustar el ancho(width) y el alta (height) del contedor en la hoja style que te mostre primero,de acuerdo al ancho y alto de la imagen que vayas a utilizar para este super truco con Css.
Listo ahora tus visitantes y tu podran apreciar una foto que rota en su eje 180 grados con efecto 3D en simple paso
