Staff en línea
Últimos temas
[Tutorial] Imagenes 3D Origin10[Ocio] Contemos hasta el 5000
por Fibo Mar Nov 12, 2019 7:51 am

[Tutorial] Imagenes 3D Origin10[Recursos] Paquetes de iconos
por Fibo Sáb Nov 09, 2019 9:46 pm

[Tutorial] Imagenes 3D
Tema iniciado por y Añadir a favoritos

[Tutorial] Imagenes 3D 
el Dom Jun 14, 2015 4:50 pm


Última edición por CD"MA el Dom Jun 14, 2015 5:07 pm, editado 1 vez
Con estos códigos lograran crear una Pagina Html estilo 3D, también lo pueden usar en cualquier parte que acepte códigos HTML.

Demon:
http://codepen.io/cdma/pen/MwvaRK

HTML:
[hidecode]
Código:
<div class="wrapper">
  <div class="inner">
    <figure>
      <img src="http://lorempixel.com/200/200/nature" alt="Nature">
      <figcaption>Nature picture</figcaption>
    </figure>
    <figure>
      <img src="http://lorempixel.com/200/200/abstract" alt="Nature">
      <figcaption>Abstract image </figcaption>
    </figure>
    <figure>
      <img src="http://lorempixel.com/200/200/animals" alt="Nature">
      <figcaption>Animal photo</figcaption>
    </figure>
  </div>
</div>[/hidecode]

[b]CSS: [/b]
[hidecode]@import "compass/css3";

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);


* {
  box-sizing: border-box;
}

body {
  font-size: 16px;
}

.wrapper {
  perspective: 1000px;
  margin: 4em auto;
  width: 37em;
}

.wrapper:hover .inner {
  transform: rotate(0)
 
}

.inner {
  transition: .3s;
  transform: rotateY(40deg);
}

.inner figure {
  box-shadow: -6px 6px 2px -3px  rgba(100,100,100,.1);
  width: 11em;
  padding: 1em;
  display: inline-block;
  margin-right: 1em;
  background: rgba(250,200,200,0.1);
  border: 1px solid rgba(250,200,200,.5);
}

.inner figcaption {
  text-align: center;
  margin: .5em 0;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: bold;
  color: darken(tomato, 15%);
}

.inner img {
  display: block;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
  -webkit-filter: sepia(75%);
}
[/hidecode]

Por supuesto puede ser editado a su gusto.
CD"MA
CD

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://www.covermyfb.com/media/covers/thumb/15699-dj-spinning-music.jpg


Color de titulos :

red


Sombra titulo :

1px 1px 1px #ccc


Mensajes :

336


Puntos :

474


Me gusta :

46


ingreso :

16/05/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Volver arriba Ir abajo

Re: [Tutorial] Imagenes 3D 
el Dom Jun 14, 2015 4:53 pm
staff
muy bonito efecto
Chalo
Chalo

¿Que estoy pensando? :

saquen el wato..... [table class=fecha_up][td]Se modifico:8/11/19 - 9:09 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/374/37476.png


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

7022


Puntos :

9140


Me gusta :

1049


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


https://www.opensourcephpbb3.com

Volver arriba Ir abajo

Re: [Tutorial] Imagenes 3D 
el Jue Nov 05, 2015 12:28 pm
Thanks [Tutorial] Imagenes 3D 953422333
AlexC
AlexC

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://fbcoversking.com/wp-content/uploads/2012/01/waves-of-colour-facebook-cover.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

7


Puntos :

8


Me gusta :

1


ingreso :

04/11/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Volver arriba Ir abajo

 En la misma categoria


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