Efeito de encolher “shrink” com CSS

Como criar o efeito de encolher “shrink” com CSS.

Utilizando a propriedade transform: scale(0.9) podemos encolher um elemento HTML reduzindo a sua escala.

Exemplo:

Elemento no tamanho normal:

Elemento com a escala reduzida:

Nos exemplos estou reduzindo a escala em 0.3.

Código CSS

CSS que foi utilizado, adicione na folha de estilo do seu projeto antes de utilizar o efeito.

.ef-shrink {
  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;
}
.ef-shrink:hover, .ef-shrink:focus, .ef-shrink:active {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}

Versão comprimida.

.ef-shrink{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:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform}.ef-shrink:hover,.ef-shrink:focus,.ef-shrink:active{-webkit-transform:scale(0.9);transform:scale(0.9)}

Utilize a classe “ef-shrink” nos elementos no qual você deseja aplicar o efeito.

...

No CSS deixei o efeito para ser executado nos eventos: hover, focus e active.

Além de encolher, você pode utilizar o transform para aumentar o elemento, clique neste link: Efeito Grow com CSS 3.