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.
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:
-
<!DOCTYPE html>
-
<html lang="en">
-
<meta charset="utf-8" />
-
<title>CSS3 Animated Photo Slider | Script Tutorials</title>
-
<link href="css/layout.css" rel="stylesheet" type="text/css" />
-
<link href="css/slider.css" rel="stylesheet" type="text/css" />
-
</head>
-
<header>
-
<h2>CSS3 Animated Photo Slider</h2>
-
</header>
-
-
<div class="slider">
-
<div class="x_rot">
-
<div class="y_rot">
-
<div id="i1">
-
<img src="images/1.jpg" />
-
</div>
-
<div id="i2">
-
<img src="images/2.jpg" />
-
</div>
-
<div id="i3">
-
<img src="images/3.jpg" />
-
</div>
-
<div id="i4">
-
<img src="images/4.jpg" />
-
</div>
-
<div id="i5">
-
<img src="images/5.jpg" />
-
</div>
-
<div id="i6">
-
<img src="images/6.jpg" />
-
</div>
-
</div>
-
</div>
-
</div>
-
</body>
-
</html>
Ahora, procederemos con el código CSS:
-
/* Animations with keyframes */
-
@-webkit-keyframes x_rot {
-
0% { -webkit-transform: rotateX(-30deg); }
-
50% { -webkit-transform: rotateX(30deg); }
-
100% { -webkit-transform: rotateX(-30deg); }
-
}
-
@-webkit-keyframes y_rot {
-
0% { -webkit-transform: rotateY(0deg); }
-
50% { -webkit-transform: rotateY(180deg); }
-
100% { -webkit-transform: rotateY(360deg); }
-
}
-
-
/* main styles */
-
.slider {
-
margin: 250px auto;
-
-
-webkit-perspective: 1000; /* setup perspective to parent */
-
}
-
.x_rot {
-
-webkit-transform-style: preserve-3d;
-
-webkit-animation-name: x_rot; /* setup custom animations */
-
-webkit-animation-duration: 6s;
-
-webkit-animation-iteration-count: infinite;
-
-webkit-animation-timing-function: ease;
-
}
-
.y_rot {
-
-webkit-transform-style: preserve-3d;
-
-webkit-animation-name: y_rot; /* setup custom animations */
-
-webkit-animation-duration: 10s;
-
-webkit-animation-iteration-count: infinite;
-
-webkit-animation-timing-function: linear;
-
}
-
.y_rot div {
-
color: rgba(0,0,0,0.9);
-
height: 235px;
-
left: 300px;
-
opacity: 0.8;
-
position: absolute;
-
width: 235px;
-
-
-webkit-border-radius: 15px;
-
-webkit-transition: .3s;
-
}
-
.y_rot div#i1 {
-
-webkit-transform: rotateY(0deg) translateZ(200px);
-
}
-
.y_rot div#i2 {
-
-webkit-transform: rotateY(60deg) translateZ(200px);
-
}
-
.y_rot div#i3 {
-
-webkit-transform: rotateY(120deg) translateZ(200px);
-
}
-
.y_rot div#i4 {
-
-webkit-transform: rotateY(180deg) translateZ(200px);
-
}
-
.y_rot div#i5 {
-
-webkit-transform: rotateY(240deg) translateZ(200px);
-
}
-
.y_rot div#i6 {
-
-webkit-transform: rotateY(300deg) translateZ(200px);
-
}
-
.y_rot div img {
-
height:235px;
-
width:235px;
-
-
-webkit-border-radius: 15px;
-
-webkit-transition: .3s;
-
}
-
-
/* onhover effect */
-
.y_rot div#i1:hover,
-
.y_rot div#i2:hover,
-
.y_rot div#i3:hover,
-
.y_rot div#i4:hover,
-
.y_rot div#i5:hover,
-
.y_rot div#i6:hover {
-
opacity: 1;
-
}
-
.y_rot div#i1:hover img,
-
.y_rot div#i2:hover img,
-
.y_rot div#i3:hover img,
-
.y_rot div#i4:hover img,
-
.y_rot div#i5:hover img,
-
.y_rot div#i6:hover img{
-
height:335px;
-
width:335px;
-
margin-left:-50px;
-
margin-top:-50px;
-
}
-
-
/* pause main animation onhover */
-
.x_rot:hover {
-
-webkit-animation-play-state: paused;
-
}
-
.y_rot:hover {
-
-webkit-animation-play-state: paused;
-
}
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
Jueves, 9 de Febrero de 2012 a las 16.05
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
Sábado, 18 de Febrero de 2012 a las 11.11
Es maravilloso lo que se consigue realizar con CSS3. Abra que adicionarle unas validaciones para los navegadores y listo.
Domingo, 4 de Marzo de 2012 a las 19.34
Excelente, justo lo que necesitaba. Ahora mismo lo pruebo a ver que tal..