Staff en línea

[html]Slider Pure CSS
Tema iniciado por y Añadir a favoritos

[html]Slider Pure CSS  
el Vie Dic 15, 2017 10:52 am
staff
[codebox]Otro slider genial para tu foro[/codebox]

DEMO
http://www.opensourcephpbb3.com/h30-sliderpurecsss-aporte
HTML
[hidecode]
Código:

<ul class="m">
  <li class="m1 li" tabindex="1"><img src="//unsplash.it/500/500?random=1" alt=""/></li>
  <li class="m2 li" tabindex="2"><img src="//unsplash.it/500/500?random=2" alt=""/></li>
  <li class="m3 li" tabindex="3"><img src="//unsplash.it/500/500?random=3" alt=""/></li>
  <li class="m4 li" tabindex="4"><img src="//unsplash.it/500/500?random=4" alt=""/></li>
  <li class="m5 li" tabindex="5"><img src="//unsplash.it/500/500?random=5" alt=""/></li>
  <li class="m6 li" tabindex="6"><img src="//unsplash.it/500/500?random=6" alt=""/></li>
  <li class="cube-wrap">
    <div class="cube">
      <div class="front"><img src="//unsplash.it/500/500?random=1" alt=""/></div>
      <div class="right"><img src="//unsplash.it/500/500?random=2" alt=""/></div>
      <div class="top"><img src="//unsplash.it/500/500?random=3" alt=""/></div>
      <div class="left"><img src="//unsplash.it/500/500?random=4" alt=""/></div>
      <div class="bottom"><img src="//unsplash.it/500/500?random=5" alt=""/></div>
      <div class="back"><img src="//unsplash.it/500/500?random=6" alt=""/></div>
    </div>
  </li>
</ul>
[/hidecode]

CSS
[hidecode]
Código:
body {
  background: #eee;
  overflow: hidden;
}

.m {
  display: block;
  width: 232px;
  height: 500px;
  position: relative;
  float: right;
  padding: 0 30px 0 40px;
  margin-top: 40px;
  -webkit-box-shadow: -10px 0 0 #D6D6D6;
          box-shadow: -10px 0 0 #D6D6D6;
}

.m .li {
  display: block;
  width: 100px;
  height: 100px;
  position: relative;
  z-index: 1000;
  float: left;
  margin: 0 10px 10px 0;
  border: solid 3px #55BFE2;
  background-color: #55BFE2;
  outline: none;
  cursor: pointer;
}

.m .li:focus img {
  opacity: .3;
}

.m .li > img {
  width: 100px;
  height: 100px;
  min-width: 100px;
  min-height: 100px;
  max-width: 100px;
  max-height: 100px;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transition: .3s;
  transition: .3s;
}

.cube-wrap {
  width: 500px;
  height: 500px;
  position: absolute;
  top: 0;
  right: 400px;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}

.cube {
  width: 500px;
  height: 500px;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateX(0deg) translateZ(-250px);
          transform: rotateX(0deg) translateZ(-250px);
  -webkit-transition: 2s 9999999s;
  transition: 2s 9999999s;
}

.cube div {
  width: 500px;
  height: 500px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #222;
}

.cube .front {
  -webkit-transform: rotateY(0deg) translateZ(250px);
          transform: rotateY(0deg) translateZ(250px);
}

.cube .back {
  -webkit-transform: rotateX(180deg) translateZ(250px);
          transform: rotateX(180deg) translateZ(250px);
}

.cube .right {
  -webkit-transform: rotateY(90deg) translateZ(250px);
          transform: rotateY(90deg) translateZ(250px);
}

.cube .left {
  -webkit-transform: rotateY(-90deg) translateZ(250px);
          transform: rotateY(-90deg) translateZ(250px);
}

.cube .top {
  -webkit-transform: rotateX(90deg) translateZ(250px);
          transform: rotateX(90deg) translateZ(250px);
}

.cube .bottom {
  -webkit-transform: rotateX(-90deg) translateZ(250px);
          transform: rotateX(-90deg) translateZ(250px);
}

.cube img {
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.li:focus ~ .cube-wrap .cube {
  -webkit-transition: 1.2s;
  transition: 1.2s;
}

.m1:focus ~ .cube-wrap .cube {
  -webkit-transform: translateZ(-250px) rotateY(0deg);
          transform: translateZ(-250px) rotateY(0deg);
}

.m2:focus ~ .cube-wrap .cube {
  -webkit-transform: translateZ(-250px) rotateY(-90deg);
          transform: translateZ(-250px) rotateY(-90deg);
}

.m3:focus ~ .cube-wrap .cube {
  -webkit-transform: translateZ(-250px) rotateX(-90deg);
          transform: translateZ(-250px) rotateX(-90deg);
}

.m4:focus ~ .cube-wrap .cube {
  -webkit-transform: translateZ(-250px) rotateY(90deg);
          transform: translateZ(-250px) rotateY(90deg);
}

.m5:focus ~ .cube-wrap .cube {
  -webkit-transform: translateZ(-250px) rotateX(90deg);
          transform: translateZ(-250px) rotateX(90deg);
}

.m6:focus ~ .cube-wrap .cube {
  -webkit-transform: translateZ(-250px) rotateX(180deg);
          transform: translateZ(-250px) rotateX(180deg);
}
[/hidecode]

Recuerda editar (cambiar) las balizas genéricas.
RinC
avatar

¿Que estoy pensando? :

Ni se te ocurra -_- [table class=fecha_up][td]Se modifico:29/03/18 - 17:44 hrs. [/td][/table]


Banner en temas :

♥♥Open♥♥


Color de titulos :

#DF7401


Sombra titulo :

1px 1px 1px #fff


Mensajes :

789


Puntos :

1147


Me gusta :

198


ingreso :

28/01/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

 En la misma categoria


Permisos de este foro:
No puedes responder a temas en este foro.