Efeito de foto 3D totalmente por CSS extremamente bonito para blogspot

Esse truque também pode transformá-lo em efeitos para o Thumb blog também é muito bonito.

Crie efeitos fotográficos 3D inteiramente com CSS

Demonstração ao vivo
Etapa 1 : você insere o seguinte css acima da tag ]]> </ b: skin>

@import url (https://fonts.googleapis.com/css?family=Open+Sans);
# hieu-ung {
    background: #ddd;
    plano de fundo: gradiente linear (#ddd, # e8e8e8);
    família de fontes: 'Open Sans', sans-serif;
    altura: 100vh;
    margem: 0;
}
.hieu-ung {
    largura: 400px;
    altura: 300px;
    margem: 70px automático;
    perspectiva: 1000px;
}
.hieu-ung a {
    display: block;
    largura: 100%;
    altura: 100%;
    plano de fundo: gradiente linear (rgba (0, 0, 0,4), rgba (0, 0, 0,4)),
  url ("https://d13yacurqjgara.cloudfront.net/users/269311/screenshots/1508393/ the_optimist_lives_on_by_huanle-d6yprp1_o_1x. jpg ");
    tamanho do fundo: 0, capa;
    estilo de transformação: preserve-3d;
    transição: todos os 0,5s;
}
.hieu-ung: passe o mouse sobre uma {
    transformação: rotateX (80deg);
    origem da transformação: parte inferior;
}
.hieu-ung a: após {
    conteúdo: '';
    posição: absoluta;
    esquerda: 0;
    inferior: 0;
    largura: 100%;
    altura: 36px;
    background: herdar;
    tamanho do fundo: capa, capa;
    posição de fundo: inferior;
    transformar: rotateX (90deg);
    origem da transformação: parte inferior;
}
.hieu-ung a span {
    cor: branco;
    transformação de texto: maiúsculas;
    posição: absoluta;
    Os 100 melhores%;
    esquerda: 0;
    largura: 100%;
    fonte: negrito 12px / 36px "Open Sans";
    alinhamento de texto: centro;
    transformar: rotateX (-89,99deg);
    origem da transformação: topo;
    índice z: 1;
}
.hieu-ung a: before {
    content: '';
    posição: absoluta;
    topo: 0;
    esquerda: 0;
    largura: 100%;
    altura: 100%;
    fundo: rgba (0, 0, 0, 0,5);
    sombra da caixa: 0 0 100px 50px rgba (0, 0, 0, 0,5);
    transição: todos os 0,5s;
    opacidade: 0,15;
    transformar: rotateX (95deg) translateZ (-80px) escala (0,75);
    origem da transformação: parte inferior;
}
.hieu-ung: passe o mouse a: antes de {
    opacidade: 1;
    sombra da caixa: 0 0 25px 25px rgba (0, 0, 0, 0,5);
    transform: rotateX (0) translateZ (-60px) scale (0.85);
}

Etapa 2 : você insere o código a seguir onde deseja exibir.

<div class = "hieu-ung">
   <a href="#">
      <span> Belo efeito flip 3D </span>
   </a>
</div>

Concluir

Então é bastante simples criar efeitos fotográficos 3D completamente com lindos CSS para blogspot certo! Espero que as dicas sejam úteis para você no processo de design.

usar esse codigo se o primeiro não funcionar

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
#hieu-ung {
    background: #ddd;
    background: linear-gradient(#ddd, #e8e8e8);
    font-family: 'Open Sans', sans-serif;
    height: 100vh;
    margin:0;
}
.hieu-ung {
    width: 400px;
    height: 300px;
    margin: 70px auto;
    perspective: 1000px;
}
.hieu-ung a {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
  url("https://d13yacurqjgara.cloudfront.net/users/269311/screenshots/1508393/the_optimist_lives_on_by_huanle-d6yprp1_o_1x.jpg");
    background-size: 0, cover;
    transform-style: preserve-3d;
    transition: all 0.5s;
}
.hieu-ung:hover a {
    transform: rotateX(80deg);
    transform-origin: bottom;
}
.hieu-ung a:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 36px;
    background: inherit;
    background-size: cover, cover;
    background-position: bottom;
    transform: rotateX(90deg);
    transform-origin: bottom;
}
.hieu-ung a span {
    color: white;
    text-transform: uppercase;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    font: bold 12px/36px "Open Sans";
    text-align: center;
    transform: rotateX(-89.99deg);
    transform-origin: top;
    z-index: 1;
}
.hieu-ung a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
    transition: all 0.5s;
    opacity: 0.15;
    transform: rotateX(95deg) translateZ(-80px) scale(0.75);
    transform-origin: bottom;
}
.hieu-ung:hover a:before {
    opacity: 1;
    box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
    transform: rotateX(0) translateZ(-60px) scale(0.85);
}