Morton 8 de Febrero de 2012 a las 09.17
   Imprimir artículo
elWebmaster.com

C贸mo crear un slider de fotos 3D con CSS3


css3wide1Siempre puede ser de utilidad un un slider 3D para mostrar fotos en forma rotativa en tu sitio. En este art铆culo te mostraremos paso por paso, c贸mo crear uno r谩pidamente y sin esfuerzo, para que puedas utilizarlo en tu web.

Haz clic aqu铆 para ver una demostraci贸n >>

Primero comenzaremos con el HTML principal. Como podr谩s ver, la estructura es m铆nima y contiene s贸lo algunos div y algunos tag img:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>CSS3 Animated Photo Slider | Script Tutorials</title>
  6.         <link href="css/layout.css" rel="stylesheet" type="text/css" />
  7.         <link href="css/slider.css" rel="stylesheet" type="text/css" />
  8.     </head>
  9.     <body>
  10.         <header>
  11.             <h2>CSS3 Animated Photo Slider</h2>
  12.             </header>
  13.  
  14.         <div class="slider">
  15.             <div class="x_rot">
  16.                 <div class="y_rot">
  17.                     <div id="i1">
  18.                         <img src="images/1.jpg" />
  19.                     </div>
  20.                     <div id="i2">
  21.                         <img src="images/2.jpg" />
  22.                     </div>
  23.                     <div id="i3">
  24.                         <img src="images/3.jpg" />
  25.                     </div>
  26.                     <div id="i4">
  27.                         <img src="images/4.jpg" />
  28.                     </div>
  29.                     <div id="i5">
  30.                         <img src="images/5.jpg" />
  31.                     </div>
  32.                     <div id="i6">
  33.                         <img src="images/6.jpg" />
  34.                     </div>
  35.                 </div>
  36.             </div>
  37.         </div>
  38.     </body>
  39. </html>

Ahora, procederemos con el c贸digo CSS:

  1. /* Animations with keyframes */
  2. @-webkit-keyframes x_rot {
  3.     0%    { -webkit-transform: rotateX(-30deg); }
  4.     50%   { -webkit-transform: rotateX(30deg); }
  5.     100{ -webkit-transform: rotateX(-30deg); }
  6. }
  7. @-webkit-keyframes y_rot {
  8.     0%    { -webkit-transform: rotateY(0deg); }
  9.     50%   { -webkit-transform: rotateY(180deg); }
  10.     100{ -webkit-transform: rotateY(360deg); }
  11. }
  12.  
  13. /* main styles */
  14. .slider {
  15.     margin: 250px auto;
  16.  
  17.     -webkit-perspective: 1000; /* setup perspective to parent */
  18. }
  19. .x_rot {
  20.     -webkit-transform-style: preserve-3d;
  21.     -webkit-animation-name: x_rot; /* setup custom animations */
  22.     -webkit-animation-duration: 6s;
  23.     -webkit-animation-iteration-count: infinite;
  24.     -webkit-animation-timing-function: ease;
  25. }
  26. .y_rot {
  27.     -webkit-transform-style: preserve-3d;
  28.     -webkit-animation-name: y_rot; /* setup custom animations */
  29.     -webkit-animation-duration: 10s;
  30.     -webkit-animation-iteration-count: infinite;
  31.     -webkit-animation-timing-function: linear;
  32. }
  33. .y_rot div {
  34.     color: rgba(0,0,0,0.9);
  35.     height: 235px;
  36.     left: 300px;
  37.     opacity: 0.8;
  38.     position: absolute;
  39.     width: 235px;
  40.  
  41.     -webkit-border-radius: 15px;
  42.     -webkit-transition: .3s;
  43. }
  44. .y_rot div#i1 {
  45.     -webkit-transform: rotateY(0deg) translateZ(200px);
  46. }
  47. .y_rot div#i2 {
  48.     -webkit-transform: rotateY(60deg) translateZ(200px);
  49. }
  50. .y_rot div#i3 {
  51.     -webkit-transform: rotateY(120deg) translateZ(200px);
  52. }
  53. .y_rot div#i4 {
  54.     -webkit-transform: rotateY(180deg) translateZ(200px);
  55. }
  56. .y_rot div#i5 {
  57.     -webkit-transform: rotateY(240deg) translateZ(200px);
  58. }
  59. .y_rot div#i6 {
  60.     -webkit-transform: rotateY(300deg) translateZ(200px);
  61. }
  62. .y_rot div img {
  63.     height:235px;
  64.     width:235px;
  65.  
  66.     -webkit-border-radius: 15px;
  67.     -webkit-transition: .3s;
  68. }
  69.  
  70. /* onhover effect */
  71. .y_rot div#i1:hover,
  72. .y_rot div#i2:hover,
  73. .y_rot div#i3:hover,
  74. .y_rot div#i4:hover,
  75. .y_rot div#i5:hover,
  76. .y_rot div#i6:hover {
  77.     opacity: 1;
  78. }
  79. .y_rot div#i1:hover img,
  80. .y_rot div#i2:hover img,
  81. .y_rot div#i3:hover img,
  82. .y_rot div#i4:hover img,
  83. .y_rot div#i5:hover img,
  84. .y_rot div#i6:hover img{
  85.     height:335px;
  86.     width:335px;
  87.     margin-left:-50px;
  88.     margin-top:-50px;
  89. }
  90.  
  91. /* pause main animation onhover */
  92. .x_rot:hover {
  93.     -webkit-animation-play-state: paused;
  94. }
  95. .y_rot:hover {
  96.     -webkit-animation-play-state: paused;
  97. }

Y eso es todo. Recuerda que, ya que hmemos usado animaci贸n CSS3 con transformaciones 3D, esto s贸lo ser谩 soportado, por el momento, por los navegadores con webkit, es decir, Google Chorome y Safari.

Haz clic aqu铆 para ver una demostraci贸n >>

Fuente original del art铆culo: Script-Tutorials
Traducci贸n realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (3)

  1. pablo dice:

    Y como podr铆a hacer que dependiendo de en donde est茅 el mouse( izquierda o derecha ) cambie la direcci贸n en la que gira, va hacia arriba, hacia abajo y hacia la derecha, pero nunca gira hacia la izquierda no importa en donde ponga el mouse

  2. Erwin dice:

    Es maravilloso lo que se consigue realizar con CSS3. Abra que adicionarle unas validaciones para los navegadores y listo.

  3. cristian 鈹 dise帽o grafico dice:

    Excelente, justo lo que necesitaba. Ahora mismo lo pruebo a ver que tal..

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Iniciar sesi贸n