A transformação CSS3 não funciona

122

Estou tentando transformar meus itens de menu girando-os 10 graus. Meu CSS funciona no Firefox, mas não consegui replicar o efeito no Chrome e no Safari. Eu sei que o IE não oferece suporte a essa propriedade CSS3, então isso não é um problema.

Usei o seguinte CSS:

li a {
   -webkit-transform:rotate(10deg);
   -moz-transform:rotate(10deg);
   -o-transform:rotate(10deg); 
}

Alguém poderia sugerir onde estou errando?

Obrigado.

html css

— Shruti
fonte

2

Para sua informação, o IE suporta essa propriedade CSS3, você só precisa de um prefixo:-ms-transform:rotate(10deg);

— Joshua Pinter

Possível duplicação da transformação CSS não funciona em elementos inline

— mems

2

Já que ninguém mencionou isso ainda, já que é 2016, certifique-se de colocar a versão sem prefixo da regra CSS (por exemplo transform: rotate(10deg);) abaixo de qualquer versão com prefixo que você escolher para suportar.

— Maximillian Laumeister

301

Esta é apenas uma suposição educada, sem ver o resto do seu HTML / CSS:

Você já se inscreveu display: blockou display: inline-blockpara li a? Se não, experimente.

Caso contrário, tente aplicar as regras de transformação CSS3 a li.

— trinta pontos
fonte

22

Eu te amo! O display: inline-blockajudado.

— Bugs Bunny

2

Uma explicação seria útil :)

— scitronboy

56

Em navegadores baseados em webkit (Safari e Chrome), -webkit-transform é ignorado em elementos embutidos. . Configure display: inline-block;para fazer funcionar . Para fins de demonstração / teste, você também pode usar um ângulo negativo ou transformation-originpara que o texto não seja girado para fora da área visível.

— phihag
fonte

Funcionou perfeitamente para mim, obrigado! Eu usei em <span> & copy </span> para fazer um símbolo copyleft.

— Elisabeth

@Elisabeth É um excelente aplicativo. Observe que as referências de entidade precisam ser encerradas por um ponto e vírgula (como em <span>©</span>), embora a maioria dos navegadores renderize nos dois sentidos.

— phihag

Outra observação: se você estiver aplicando a transformação para um estado de interação (por exemplo, :hoverou :active), você precisará aplicar o inline-blockao elemento em seu estado padrão, por exemplo a { display: inline-block; } a:active { transform: translateY(0.125em); },. Aplicar apenas inline-blockao estado de interação não parece funcionar. Pelo menos no Chrome - funciona bem no Firefox.

— Paul d'Aoust de

1

obrigado por apontar o fato de que -webkit-transformnão funciona em itens embutidos. Esteve preso nisso anteriormente.

— pbojinov

@phihag Excelente ponto, você me poupou de grandes puxões de cabelo! É importante notar que isso pode fazer com que seus elementos desapareçam após a execução da animação.

— texelate

21

_{Uma vez que ninguém fez referência à documentação relevante:}

Módulo de transformações CSS de nível 1 - Terminologia - Elemento transformável

Um elemento transformável é um elemento em uma destas categorias:

um elemento cujo layout é governado pelo modelo de caixa CSS, que é um elemento em nível de bloco ou atômico em linha , ou cuja propriedade de exibição calcula para linha de tabela, grupo de linha de tabela, grupo de cabeçalho de tabela, rodapé de tabela -group, table-cell ou table-caption

um elemento no namespace SVG e não regido pelo modelo de caixa CSS que possui os atributos transform, 'patternTransform' ou gradientTransform.

No seu caso, os <a>elementos são inlinepor padrão.

Alterar o displayvalor da propriedade para inline-blockrenderizar os elementos como elementos atômicos de nível embutido e , portanto, os elementos se tornam "transformáveis" por definição.

li a {
   display: inline-block;
   -webkit-transform: rotate(10deg);
   -moz-transform: rotate(10deg);
   -o-transform: rotate(10deg); 
   transform: rotate(10deg);
}

Conforme mencionado acima, isso só parece aplicável em -webkitnavegadores baseados, uma vez que parece funcionar no IE / FF independentemente.

— Josh Crozier
fonte

0

Você está especificamente tentando girar apenas os links? Porque fazer isso nas tags LI parece funcionar bem.

De acordo com Snook, as transformações exigem que os elementos afetados sejam bloqueados. Ele também tem algum código lá para fazer isso funcionar para o IE usando filtros, se você quiser adicioná-lo (embora pareça haver alguma limitação nos valores).

— Su '
fonte

-4

-webkit-transform não é mais necessário

ms já suporta rotação ( -ms-transform: rotate(-10deg);)

tente isto:

li a {
   ...

    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -sand-transform: rotate(10deg);
    display: block;
    position: fixed;
    }

— PDJ
fonte

1

Durante meus testes de hoje, percebi que de -webkit-transformfato não era mais necessário no Chrome. No entanto, ele ainda era necessário no Safari 8.

— John Slegers

Para que serve -sand-transform? Uma breve pesquisa no Google não resultou em nada.

— Pete

google 'CSS Sandpaper' que é relevante para a questão e pode tornar as coisas mais fáceis. é um hack que implementa suporte para a transformação CSS padrão para versões antigas do IE

— Pedro Justo