sábado, 1 de junio de 2013

Efecto 3D Para Imagenes Con Css3 Para Blog

By andante77 6:17 a.m. , , , , , , , , , , Leave a Comment


 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.

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.


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 {
  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;
}
5.Dan Click a guardar plantilla.
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
If You Enjoyed This, Take 5 Seconds To Share It

0 comentarios:

Publicar un comentario