Efeito “float” e “sink”, flutuar e afundar com CSS 3

Como fazer o efeito “float” e “sink”, flutuar e afundar com CSS 3 utilizando as propriedades transform e transition-duration.

efeito flutuar e afundar em um elemento utilizando CSS

Com as propriedades transform e transition-duration conseguimos simular o efeito de flutuar e afundar ou subir e descer em um elemento qualquer em sua página, Div, Input, etc, veja os exemplos abaixo:

Exemplos efeito Float e Sink

Exemplo com Float “flutuar”

Passe o mouse

Agora o exemplo com Sink “afundar”

Passe o mouse

Código CSS necessário

.float {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.float:hover, .float:focus, .float:active {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
.sink {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.sink:hover, .sink:focus, .sink:active {
-webkit-transform: translateY(8px);
transform: translateY(8px);
}

Ajuste as propriedade transform: translateY(-8px); para aumentar a quantidade de pixel que o elemento deverá subir ou descer.

Já para alterar a velocidade de execução da animação mude transition-duration informando o novo valor desejado em segundos.

CSS “minify”

CSS já com o tamanho reduzido para você incluir no seu projeto.

.float,.sink{display:inline-block;vertical-align:middle;box-shadow:0 0 1px transparent}.float{-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}.float:active,.float:focus,.float:hover{-webkit-transform:translateY(-8px);transform:translateY(-8px)}.sink{-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}.sink:active,.sink:focus,.sink:hover{-webkit-transform:translateY(8px);transform:translateY(8px)}

 

Dúvidas? Faça um comentário logo abaixo ou envie uma mensagem clicando aqui.

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *