Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Meu calc não funcionou

Eu tentei reproduzir sozinho o exercício proposto, quase acertei (fico feliz por isso kkkk), porém, eu "travei" quando o console do Chrome apresentou erro no meu CSS e também com a resposta do exercício.

"transform: translate(calc(.707 (3.5em - 100%) + 100%), calc(-.707 3.5em)) rotate(45deg);" O Chrome me alerta que isto está errado, recebo a mensagem: "Invalid Property Value".

No meu Visual Studio Code está assim:

.banner-twitter {
    position: absolute;
    top: 0;
    right: 0;
    line-height: 1;
    /* largura = 14em */
    /* altura = 3.5em */
    /* tx = .707 * h - .707 * w + w */
    /* ty = -.707 * h */
    transform: translate (calc(.0.707 * (3.5em - 100%) + 100%), calc(-.707 * 3.5em)) rotate(45deg);
    transform-origin: 0 0;
    width: 14em;
    padding: 1em 0;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    background-color: #3C1D3D;
    color: white;
    border: .25em solid black;
    font-size: 1.2em;
    font-family: "Open Sans Condensed", sans-serif;
}

Pode me indicar onde eu errei, por favor?

Obrigado.

2 respostas
solução!

Dois detalhes bobos: um espaço antes do parenteses do translate e um ponto a mais no primeiro numero:

transform: translate(calc(0.707 * (3.5em - 100%) + 100%), calc(-.707 * 3.5em)) rotate(45deg)

Olha que simples... Eu não percebi. Obrigado!