translateZ não funciona

Boa Noite Marcelo,

Para o efeito de aproximar/afastar funcionar você tem que definir a propriedade perspective(), ela que define a distância/ângulo em que o usuário está visualizando o quadradro e faz dar o efeito desejado:

.quadrado1 {
    background-color: #FFFF00;
    height: 1em;
    width: 1em;
    position: absolute;
    top: 1.1em;
    left: 1em;
    transform: perspective(20px) rotate(45deg) translateZ(10px);
}

Além disso, você pode definir o atributo de perspectiva na classe pai quadrado:

.quadrado {
    width: 3em;
    height: 3em;
    position: relative;
    perspective: 20px;
}
.quadrado1 {
    background-color: #FFFF00;
    height: 1em;
    width: 1em;
    position: absolute;
    top: 1.1em;
    left: 1.1em;
    transform: rotate(45deg) translateZ(15px);
}

Só lembrando que o parâmetro passado no translateZ não pode ser maior que o do perspective pois, seria o mesmo que a imagem "ir para trás" do usuário.

Valeu, funcionou!! mas só quando eu coloco o perspective dentro do transform do quadrado especifico, quando uso no quadrado pai ele desloca/some os meus quadrados na tela.