Escrivaninha: faça a sua!... ..."bancos como cavaletes e , colocar um tampo de vidro".

2017-03-25T19:45:00.001-07:00

ESCRIVANINHA – FAÇA VOCÊ MESMO

Em Faça você mesmo

Simples, rápido e bem explicado.

Escrivaninha_1

..."bancos como cavaletes
e ,
colocar um tampo de vidro".

...na vidraçaria
...escolhendo um vidro temperado
que não será mais usado
e obêm-se descontos! "

...tranporte- , você mesmo, com
cinto de segurança!"

Escrivaninha_2

O vidro tem 1,55×0,55m ,temperado,
... se for novo,
e não tiver 02 (dois) furos ,
(o que significa que não poderá mais ser furado ou cortado) ,
...Consegue-se desconto ...

Outra opção é procurar em demolidoras que tem diversos tamanhos de vidros assim.

...único trabalho
foi fazer uns furos nos bancos
para colocar
umas ventosas
para dar estabilidade
e o tampo não sair sambando ...

Escrivaninha_3

...as ventosas encontra-se em vidraçaria a baixo custo...

...numa marcenaria pequena, encontra-se, os bancos maiores , assim como o banco pequeno.

Escrivaninha_4

Escrivaninha_5

Os bancos, caso queira, podem ser pintados, a gosto da pessoa!

fonte:homensdacasa

|| foursquare
Adicione sua URL no Google, e apareça nas buscas "Dólar hoje" ... "Confira, sempre e, Fique por dentro ! "

Fale conosco!

2017-03-25T16:20:00.000-07:00

|| foursquare
Adicione sua URL no Google, e apareça nas buscas "Dólar hoje" ... "Confira, sempre e, Fique por dentro ! "

email:

envialinks.noticias@gmail.com

aulasonlineg.

...intensedebate...Mensagens / Recados/ Comentários...

Comments

Logging you in...

Close Login with your OpenID Or create an account using OpenID

Back

Cancel 7)%20document.getElementById('frmHeadLoginOpenID').submit();%20else%20showMsgBox('Invalid%20OpenID%20url.',%20' Please%20put%20in%20your%20OpenID%20URL%20and%20try%20to%20login%20again! ',%200,%20this);">Login

Dashboard Edit profile Logout

Logged in as

There are no comments posted yet. Be the first one!

Post a new comment

Comment as a Guest, or login:

Tweet this comment

Connected as (Logout)

Email (optional)

Not displayed publicly.

Submit Comment

Subscribe to

volte sempre

Comments by IntenseDebate

Fale conosco!

Pode usar o sistema de comentários aqui:

vassouras de garrafa pet: passo a passo

2017-03-25T16:08:00.001-07:00

fonte da imagem acima: buscada da internet

|| foursquare
Adicione sua URL no Google, e apareça nas buscas "Dólar hoje" ... "Confira, sempre e, Fique por dentro ! "

Parcerias

2014-04-05T07:38:00.000-07:00

Parcerias:

banner

120x60

nosso banner:

nosso banner!
▼
copie o código
▼

Página efeito flip com CSS

2011-09-28T20:42:00.000-07:00

fonte e créditos:
vagabundia.

Efecto Flip Page con CSS

Pure CSS3 Page Flip Effect

es un experimento más de Román Cortés que, por la fecha de su realización, sólo funcionaba en Chorme pero, que con algunos pequeños agregados, también funcionará en otros navegadores.

Las reglas de estilo son bastante complejas aunque no usan propiedades sofisticadas así que no se pueden explicar demasiado; sólo hay que poner manos a la obra, hacer algunos calculos aritméticos e ir probando poco a poco porque el resultado es espectacular y permitiría hacer muchas otras cosas.

En este ejemplo, me he limitado a agregar las propiedades para Firefox y he simplificado un poco la idea.

Pure CSS3 Page Flip Effect

<style type="text/css">
#page-flip {
  height: 450px;
  overflow: hidden;
  padding: 30px 0 0 320px;
  position: relative;
  width: 300px;
}
#r1 {
  position: absolute;
  z-index: 2;
  -webkit-transform-origin: 1315px 500px;
  -webkit-transform: translate(-1030px, -500px) rotate(-32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -moz-transform-origin: 1315px 500px;
  -moz-transform: translate(-1030px, -500px) rotate(-32deg);
  -moz-transition-property: -moz-transform, -moz-transform-origin;
  -moz-transition-duration: 1s;
}
#p1 {
  height: 1388px;
  overflow: hidden;
  width: 1285px;
}
#p1 > div {
  background-image: url(URL_primera_imagen);
  height: 388px;
  width: 285px;
  -webkit-transform-origin: 285px 0;
  -webkit-transform: translate(1030px, 500px) rotate(32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -moz-transform-origin: 285px 0;
  -moz-transform: translate(1030px, 500px) rotate(32deg);
  -moz-transition-property: -moz-transform, -moz-transform-origin;
  -moz-transition-duration: 1s;
}
#p1 > div > div {
  height: 388px;
  width: 10px;
}
 #p2 > div {
  background-image: url(URL_segunda_imagen);
  box-shadow: 0 0 11px rgba(0, 0, 0, .5);
  height: 388px;
  position: absolute;
  width: 285px;
  z-index: 1;
}
#r3 {
  position: absolute;
  z-index: 2;
  -webkit-transform-origin: 1315px 500px;
  -webkit-transform: translate(-1030px, -500px) rotate(-32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -moz-transform-origin: 1315px 500px;
  -moz-transform: translate(-1030px, -500px) rotate(-32deg);
  -moz-transition-property: -moz-transform, -moz-transform-origin;
  -moz-transition-duration: 1s;
}
#s3 {
  position: absolute;
  z-index: 1;
  -webkit-transform-origin: 70px 500px;
  -webkit-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -moz-transform-origin: 70px 500px;
  -moz-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0);
  -moz-transition-property: -moz-transform, -moz-transform-origin;
  -moz-transition-duration: 1s;
}
#page-flip:hover #s3 {
  -webkit-transform-origin: 325px 500px;
  -webkit-transform: translate(-40px, -500px) rotate(0deg) translate(40px, 0);
  -moz-transform-origin: 325px 500px;
  -moz-transform: translate(-40px, -500px) rotate(0deg) translate(40px, 0);
}
#sp3 {
  height: 1000px;
  overflow: hidden;
  width: 25px;
  -webkit-transition-property: width;
  -webkit-transition-duration: 1s;
  -moz-transition-property: width;
  -moz-transition-duration: 1s;
}
#page-flip:hover #sp3 {
  width: 11px;
}
.s {
  height: 388px;
  position: absolute;
  overflow: hidden;
  width: 285px;
  z-index: 3;
}
#s2 {
  position: absolute;
  -webkit-transform-origin: 45px 500px;
  -webkit-transform: translate(240px, -500px) rotate(-32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -moz-transform-origin: 45px 500px;
  -moz-transform: translate(240px, -500px) rotate(-32deg);
  -moz-transition-property: -moz-transform, -moz-transform-origin;
  -moz-transition-duration: 1s;
}
#sp2 {
  height: 1000px;
  overflow: hidden;
  width: 15px;
}
#s4 {
  opacity: 1;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
}
#page-flip:hover #s4 {
  opacity: 0;
}
#page-flip:hover #s2 {
  -webkit-transform-origin: 300px 500px;
  -webkit-transform: translate(-15px, -500px) rotate(0deg);
  -moz-transform-origin: 300px 500px;
  -moz-transform: translate(-15px, -500px) rotate(0deg);
}
#p3 {
  height: 1388px;
  overflow: hidden;
  width: 1285px;
}
#p3 > div {
  background-image: url(URL_segunda_imagen);
  box-shadow: 0 0 11px rgba(0, 0, 0, .5);
  overflow: hidden;
  height: 388px;
  width: 285px;
  -webkit-transform-origin: 0 0;
  -webkit-transform: translate(1255px, 500px) rotate(-32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -moz-transform-origin: 0 0;
  -moz-transform: translate(1255px, 500px) rotate(-32deg);
  -moz-transition-property: -moz-transform, -moz-transform-origin;
  -moz-transition-duration: 1s;
}
#p3 > div > div {
  float: right;
  height: 500px;
  width: 9px;
}
#page-flip:hover #r1 {
  -webkit-transform-origin: 1570px 500px;
  -webkit-transform: translate(-1285px, -500px) rotate(0deg);
  -moz-transform-origin: 1570px 500px;
  -moz-transform: translate(-1285px, -500px) rotate(0deg);
}
#page-flip:hover #p1 > div {
  -webkit-transform-origin: 285px 0;
  -webkit-transform: translate(1285px, 500px) rotate(0deg);
  -moz-transform-origin: 285px 0;
  -moz-transform: translate(1285px, 500px) rotate(0deg);
}
#page-flip:hover #r3 {
  -webkit-transform-origin: 1570px 500px;
  -webkit-transform: translate(-1285px, -500px) rotate(0deg);
  -moz-transform-origin: 1570px 500px;
  -moz-transform: translate(-1285px, -500px) rotate(0deg);
}
#page-flip:hover #p3 > div {
  -webkit-transform-origin: 0 0;
  -webkit-transform: translate(1000px, 500px) rotate(0deg);
  -moz-transform-origin: 0 0;
  -moz-transform: translate(1000px, 500px) rotate(0deg);
}
#enlace {
  color: #FFF;
  display: block;
  font-family: Verdana;
  font-size: 32px;
  height: 320px;
  margin: -20000px 0 0;
  position: absolute;
  text-align: center;
  text-shadow: 0 3px 1px #000;
  width: 250px;
  z-index: 3;
  -webkit-transition-duration: 0.01s;
  -webkit-transition-property: margin;
  -moz-transition-duration: 0.01s;
  -moz-transition-property: margin;
}
#enlace:hover {
  border: 1px dotted #CCC;
}
#page-flip:hover #enlace {
  margin: 30px 0 0 15px;
  -webkit-transition-delay: .8s;
  -moz-transition-delay: .8s;
}
</style>

<div id="page-flip">
  <div id="r1">
    <div id="p1"><div><div></div></div></div>
  </div>
  <div id="p2"><div></div></div>
  <div id="r3">
    <div id="p3"><div><div></div></div></div>
  </div>
  <div class="s">
    <div id="s3"><div id="sp3"></div></div>
  </div>
  <div class="s" id="s4">
    <div id="s2"><div id="sp2"></div></div>
  </div>
  <a id="enlace" href="URL_enlace" title="" target="_blank">texto del enlace</a>
</div>

traduzido:

Página efeito flip com CSS
Efeito Página pura CSS3 Flip é uma experiência mais de Roman Tribunal, a data de execução, só trabalhou com Chorme, mas com algumas pequenas adições, também funcionam em outros navegadores.
Regras de estilo são bastante complexas, mas as propriedades de uso não tão sofisticado não pode explicar muito, basta colocar para trabalhar, fazer alguma aritmética e continuar tentando devagar porque o resultado é espetacular e faria muitas outras coisas .
"Neste exemplo, eu limitei-me a adicionar as propriedades para o Firefox e tenho simplificado um pouco a idéia."
Efeito Página pura CSS3 Virar<style type="text/css"># Page flip-{
  height: 450px;
  overflow: hidden;
  padding: 30px 0 0 320px;
  position: relative;
  width: 300px;}# {R1
  position: absolute;
  z-index: 2;
  -Webkit-transform origem: 1315px 500px;
  -Webkit-transform: traduzir (-1030px, 500px), rotate (-32deg);
  -Webkit-transição propriedade:-webkit-transform,-webkit-transform origem;
  -Webkit-transição duração: 1s;
  -Moz-transform origem: 1315px 500px;
  -Moz-transform: traduzir (-1030px, 500px), rotate (-32deg);
  -Moz-transição propriedade:-moz-transform,-moz-transform origem;
  -Moz-transição duração: 1s;}# {P1
  height: 1388px;
  overflow: hidden;
  width: 1285px;}# P1> div {
  background-image: url (URL_primera_imagen);
  height: 388px;
  width: 285px;
  -Webkit-transform origem: 285px 0;
  -Webkit-transform: translate (1030px, 500px) rotate (32deg);
  -Webkit-transição propriedade:-webkit-transform,-webkit-transform origem;
  -Webkit-transição duração: 1s;
  -Moz-transform origem: 285px 0;
  -Moz-transform: translate (1030px, 500px) rotate (32deg);
  -Moz-transição propriedade:-moz-transform,-moz-transform origem;
  -Moz-transição duração: 1s;}# P1> div> div {
  height: 388px;
  width: 10px;}
# P2> div {
  background-image: url (URL_segunda_imagen);
  box-shadow: 0 0 11px rgba (0, 0, 0, 0,5);
  height: 388px;
  position: absolute;
  width: 285px;
  z-index: 1;}# {R3
  position: absolute;
  z-index: 2;
  -Webkit-transform origem: 1315px 500px;
  -Webkit-transform: traduzir (-1030px, 500px), rotate (-32deg);
  -Webkit-transição propriedade:-webkit-transform,-webkit-transform origem;
  -Webkit-transição duração: 1s;
  -Moz-transform origem: 1315px 500px;
  -Moz-transform: traduzir (-1030px, 500px), rotate (-32deg);
  -Moz-transição propriedade:-moz-transform,-moz-transform origem;
  -Moz-transição duração: 1s;}# {S3
  position: absolute;
  z-index: 1;
  -Webkit-transform origem: 70px 500px;
  -Webkit-transform: translate (215px, 500px), rotate (-32deg) translate (40px, 0);
  -Webkit-transição propriedade:-webkit-transform,-webkit-transform origem;
  -Webkit-transição duração: 1s;
  -Moz-transform origem: 70px 500px;
  -Moz-transform: translate (215px, 500px), rotate (-32deg) translate (40px, 0);
  -Moz-transição propriedade:-moz-transform,-moz-transform origem;
  -Moz-transição duração: 1s;}# Page-flip: hover {# s3
  -Webkit-transform origem: 325px 500px;
  -Webkit-transform: traduzir (-40px, 500px), rotate (0deg) translate (40px, 0);
  -Moz-transform origem: 325px 500px;
  -Moz-transform: traduzir (-40px, 500px), rotate (0deg) translate (40px, 0);}# {Sp3
  height: 1000px;
  overflow: hidden;
  width: 25px;
  -Webkit-transição da propriedade: largura;
  -Webkit-transição duração: 1s;
  -Moz-transição da propriedade: largura;
  -Moz-transição duração: 1s;}# Page-flip: hover {# sp3
  width: 11px;}. S {
  height: 388px;
  position: absolute;
  overflow: hidden;
  width: 285px;
  z-index: 3;}# {S2
  position: absolute;
  -Webkit-transform origem: 45px 500px;
  -Webkit-transform: translate (240px, 500px), rotate (-32deg);
  -Webkit-transição propriedade:-webkit-transform,-webkit-transform origem;
  -Webkit-transição duração: 1s;
  -Moz-transform origem: 45px 500px;
  -Moz-transform: translate (240px, 500px), rotate (-32deg);
  -Moz-transição propriedade:-moz-transform,-moz-transform origem;
  -Moz-transição duração: 1s;}# {Sp2
  height: 1000px;
  overflow: hidden;
  width: 15px;}# {S4
  opacidade: 1;
  -Webkit-transição duração: 0.5s;
  -Moz-transição duração: 0.5s;}# Page-flip: hover {# s4
  opacidade: 0;}# Page-flip: hover {# s2
  -Webkit-transform origem: 300px 500px;
  -Webkit-transform: traduzir (-15px, 500px), rotate (0deg);
  -Moz-transform origem: 300px 500px;
  -Moz-transform: traduzir (-15px, 500px), rotate (0deg);}# {P3
  height: 1388px;
  overflow: hidden;
  width: 1285px;}# P3 div> {
  background-image: url (URL_segunda_imagen);
  box-shadow: 0 0 11px rgba (0, 0, 0, 0,5);
  overflow: hidden;
  height: 388px;
  width: 285px;
  -Webkit-transform-origin: 0 0;
  -Webkit-transform: translate (1255px, 500px) girar (-32deg);
  -Webkit-transição propriedade:-webkit-transform,-webkit-transform origem;
  -Webkit-transição duração: 1s;
  -Moz-transform-origin: 0 0;
  -Moz-transform: translate (1255px, 500px) girar (-32deg);
  -Moz-transição propriedade:-moz-transform,-moz-transform origem;
  -Moz-transição duração: 1s;}# P3 div> div> {
  float: right;
  height: 500px;
  width: 9px;}# Page-flip: hover {# r1
  -Webkit-transform origem: 1570px 500px;
  -Webkit-transform: traduzir (-1285px, 500px), rotate (0deg);
  -Moz-transform origem: 1570px 500px;
  -Moz-transform: traduzir (-1285px, 500px), rotate (0deg);}# Page-flip: hover # p1 div> {
  -Webkit-transform origem: 285px 0;
  -Webkit-transform: translate (1285px, 500px) girar (0deg);
  -Moz-transform origem: 285px 0;
  -Moz-transform: translate (1285px, 500px) girar (0deg);}# Page-flip: hover {# r3
  -Webkit-transform origem: 1570px 500px;
  -Webkit-transform: traduzir (-1285px, 500px), rotate (0deg);
  -Moz-transform origem: 1570px 500px;
  -Moz-transform: traduzir (-1285px, 500px), rotate (0deg);}# Page-flip: hover # p3 div> {
  -Webkit-transform-origin: 0 0;
  -Webkit-transform: translate (1000px, 500px) girar (0deg);
  , Moz-transform-origin: 0 0;
  -Moz-transform: translate (1000px, 500px) girar (0deg);}# Link {
  color: # FFF;
  display: block;
  font-family: Verdana;
  font-size: 32px;
  height: 320px;
  margin: 0 0-20000px;
  position: absolute;
  text-align: center;
  text-shadow: 0 1px 3px # 000;
  width: 250px;
  z-index: 3;
  -Webkit-transição duração: 0.01s;
  -Webkit-transição da propriedade: margem;
  -Moz-transição duração: 0.01s;
  -Moz-transição de propriedade: margem;}# Link: hover {
  border: 1px pontilhada # CCC;}# Page-flip: hover {link #
  margin: 30px 0 0 15px;
  -Webkit-transição atraso: 0,8 s;
  -Moz-transição atraso: 0,8 s;}</ Style>
<div id="page-flip">
  <div id="r1">
    <div> id = "p1"> <div </ div> </ div> </ div>
  </ Div>
  <div id="p2"> </ div> </ div>
  <div id="r3">
    <div> id = "p3"> <div </ div> </ div> </ div>
  </ Div>
  <div class="s">
    <div id="s3"> <div id="sp3"> </ div> </ div>
  </ Div>
  <div class="s" id="s4">
    <div id="s2"> <div id="sp2"> </ div> </ div>
  </ Div>
  <a id="enlace" title="" target="_blank"> href = "URL_enlace" texto do link </ a></ Div>

enfim:

Efecto Flip Page con CSS

Pure CSS3 Page Flip Effect es un experimento más de Román Cortés que, por la fecha de su realización, sólo funcionaba en Chorme pero, que con algunos pequeños agregados, también funcionará en otros navegadores.

Las reglas de estilo son bastante complejas aunque no usan propiedades sofisticadas así que no se pueden explicar demasiado; sólo hay que poner manos a la obra, hacer algunos calculos aritméticos e ir probando poco a poco porque el resultado es espectacular y permitiría hacer muchas otras cosas.

En este ejemplo, me he limitado a agregar las propiedades para Firefox y he simplificado un poco la idea.

Pure CSS3 Page Flip Effect

<style type="text/css">
#page-flip {
  height: 450px;
  overflow: hidden;
  padding: 30px 0 0 320px;
  position: relative;
  width: 300px;
}
#r1 {
  position: absolute;
  z-index: 2;
  -webkit-transform-origin: 1315px 500px;
  -webkit-transform: translate(-1030px, -500px) rotate(-32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -moz-transform-origin: 1315px 500px;
  -moz-transform: translate(-1030px, -500px) rotate(-32deg);
  -moz-transition-property: -moz-transform, -moz-transform-origin;
  -moz-transition-duration: 1s;
}
#p1 {
  height: 1388px;
  overflow: hidden;
  width: 1285px;
}
#p1 > div {
  background-image: url(URL_primera_imagen);
  height: 388px;
  width: 285px;
  -webkit-transform-origin: 285px 0;
  -webkit-transform: translate(1030px, 500px) rotate(32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -moz-transform-origin: 285px 0;
  -moz-transform: translate(1030px, 500px) rotate(32deg);
  -moz-transition-property: -moz-transform, -moz-transform-origin;
  -moz-transition-duration: 1s;
}
#p1 > div > div {
  height: 388px;
  width: 10px;
}
 #p2 > div {
  background-image: url(URL_segunda_imagen);
  box-shadow: 0 0 11px rgba(0, 0, 0, .5);
  height: 388px;
  position: absolute;
  width: 285px;
  z-index: 1;
}
#r3 {
  position: absolute;
  z-index: 2;
  -webkit-transform-origin: 1315px 500px;
  -webkit-transform: translate(-1030px, -500px) rotate(-32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -moz-transform-origin: 1315px 500px;
  -moz-transform: translate(-1030px, -500px) rotate(-32deg);
  -moz-transition-property: -moz-transform, -moz-transform-origin;
  -moz-transition-duration: 1s;
}
#s3 {
  position: absolute;
  z-index: 1;
  -webkit-transform-origin: 70px 500px;
  -webkit-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -moz-transform-origin: 70px 500px;
  -moz-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0);
  -moz-transition-property: -moz-transform, -moz-transform-origin;
  -moz-transition-duration: 1s;
}
#page-flip:hover #s3 {
  -webkit-transform-origin: 325px 500px;
  -webkit-transform: translate(-40px, -500px) rotate(0deg) translate(40px, 0);
  -moz-transform-origin: 325px 500px;
  -moz-transform: translate(-40px, -500px) rotate(0deg) translate(40px, 0);
}
#sp3 {
  height: 1000px;
  overflow: hidden;
  width: 25px;
  -webkit-transition-property: width;
  -webkit-transition-duration: 1s;
  -moz-transition-property: width;
  -moz-transition-duration: 1s;
}
#page-flip:hover #sp3 {
  width: 11px;
}
.s {
  height: 388px;
  position: absolute;
  overflow: hidden;
  width: 285px;
  z-index: 3;
}
#s2 {
  position: absolute;
  -webkit-transform-origin: 45px 500px;
  -webkit-transform: translate(240px, -500px) rotate(-32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -moz-transform-origin: 45px 500px;
  -moz-transform: translate(240px, -500px) rotate(-32deg);
  -moz-transition-property: -moz-transform, -moz-transform-origin;
  -moz-transition-duration: 1s;
}
#sp2 {
  height: 1000px;
  overflow: hidden;
  width: 15px;
}
#s4 {
  opacity: 1;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
}
#page-flip:hover #s4 {
  opacity: 0;
}
#page-flip:hover #s2 {
  -webkit-transform-origin: 300px 500px;
  -webkit-transform: translate(-15px, -500px) rotate(0deg);
  -moz-transform-origin: 300px 500px;
  -moz-transform: translate(-15px, -500px) rotate(0deg);
}
#p3 {
  height: 1388px;
  overflow: hidden;
  width: 1285px;
}
#p3 > div {
  background-image: url(URL_segunda_imagen);
  box-shadow: 0 0 11px rgba(0, 0, 0, .5);
  overflow: hidden;
  height: 388px;
  width: 285px;
  -webkit-transform-origin: 0 0;
  -webkit-transform: translate(1255px, 500px) rotate(-32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -moz-transform-origin: 0 0;
  -moz-transform: translate(1255px, 500px) rotate(-32deg);
  -moz-transition-property: -moz-transform, -moz-transform-origin;
  -moz-transition-duration: 1s;
}
#p3 > div > div {
  float: right;
  height: 500px;
  width: 9px;
}
#page-flip:hover #r1 {
  -webkit-transform-origin: 1570px 500px;
  -webkit-transform: translate(-1285px, -500px) rotate(0deg);
  -moz-transform-origin: 1570px 500px;
  -moz-transform: translate(-1285px, -500px) rotate(0deg);
}
#page-flip:hover #p1 > div {
  -webkit-transform-origin: 285px 0;
  -webkit-transform: translate(1285px, 500px) rotate(0deg);
  -moz-transform-origin: 285px 0;
  -moz-transform: translate(1285px, 500px) rotate(0deg);
}
#page-flip:hover #r3 {
  -webkit-transform-origin: 1570px 500px;
  -webkit-transform: translate(-1285px, -500px) rotate(0deg);
  -moz-transform-origin: 1570px 500px;
  -moz-transform: translate(-1285px, -500px) rotate(0deg);
}
#page-flip:hover #p3 > div {
  -webkit-transform-origin: 0 0;
  -webkit-transform: translate(1000px, 500px) rotate(0deg);
  -moz-transform-origin: 0 0;
  -moz-transform: translate(1000px, 500px) rotate(0deg);
}
#enlace {
  color: #FFF;
  display: block;
  font-family: Verdana;
  font-size: 32px;
  height: 320px;
  margin: -20000px 0 0;
  position: absolute;
  text-align: center;
  text-shadow: 0 3px 1px #000;
  width: 250px;
  z-index: 3;
  -webkit-transition-duration: 0.01s;
  -webkit-transition-property: margin;
  -moz-transition-duration: 0.01s;
  -moz-transition-property: margin;
}
#enlace:hover {
  border: 1px dotted #CCC;
}
#page-flip:hover #enlace {
  margin: 30px 0 0 15px;
  -webkit-transition-delay: .8s;
  -moz-transition-delay: .8s;
}
</style>

<div id="page-flip">
  <div id="r1">
    <div id="p1"><div><div></div></div></div>
  </div>
  <div id="p2"><div></div></div>
  <div id="r3">
    <div id="p3"><div><div></div></div></div>
  </div>
  <div class="s">
    <div id="s3"><div id="sp3"></div></div>
  </div>
  <div class="s" id="s4">
    <div id="s2"><div id="sp2"></div></div>
  </div>
  <a id="enlace" href="URL_enlace" title="" target="_blank">texto del enlace</a>
</div>

►blogspot de edilene

Escrivaninha: faça a sua!... ..."bancos como cavaletes e , colocar um tampo de vidro".

Fale conosco!

Comments

Post a new comment

vassouras de garrafa pet: passo a passo

Parcerias

"Política de Privacidade - Google AdSense"

Página efeito flip com CSS

visitas