Estamos en Facebook Estamos en Google + Visita nuestro RSS Siguenos en Twitter Proximamente en Vimeo Suscribete en Youtube

miércoles, 15 de febrero de 2012

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

Entrada más reciente Entrada antigua


Siempre 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.
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:
PLAIN TEXT
  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:
PLAIN TEXT
  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.
Fuente original del artículo: Script-Tutorials
Traducción realizada por elWebmaster.com
Publicado por en
Etiquetas:

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)