Perguntas com a marcação «css-transforms»

Usando CSS, como posso aplicar mais de um transform? Exemplo: A seguir, apenas a tradução é aplicada, não a rotação. li:nth-child(2) { transform: rotate(15deg); transform: translate(-20px,0px); }

605 css  css-transforms 

Eu tenho uma situação em que, em circunstâncias normais de CSS, uma div fixa seria posicionada exatamente onde é especificada ( top:0px, left:0px). Isso não parece ser respeitado se eu tiver um pai que tenha uma conversão translate3d. Não estou vendo alguma coisa? Eu tentei outras opções de transformação e …

140 html  css  css-position  css-transforms 

Digamos que eu tenha algumas colunas, das quais gostaria de girar os valores de: http://jsfiddle.net/MTyFP/1/ <div class="container"> <div class="statusColumn"><span>Normal</span></div> <div class="statusColumn"><a>Normal</a></div> <div class="statusColumn"><b>Rotated</b></div> <div class="statusColumn"><abbr>Normal</abbr></div> </div> Com este CSS: .statusColumn b { writing-mode: tb-rl; white-space: nowrap; display: inline-block; overflow: visible; transform: rotate(-90deg); transform-origin: 50% 50%; } Acaba ficando assim: É …

119 css  css-transforms 

Estou tendo problemas para girar e posicionar uma linha de texto. Agora é apenas a posição que funciona. A rotação também funciona, mas apenas se eu desativar o posicionamento. CSS: #rotatedtext { transform-origin: left; transform: rotate(90deg); transform: translate(50%, 50%); } O html é apenas um texto simples.

86 css  webkit  transform  css-transforms 

Estou tentando criar uma animação no estilo montanha-russa com CSS. Eu quero saber como curvar a "montanha-russa" quando estiver no estágio de loop. Estou procurando por uma solução totalmente CSS, mas se houver necessidade de um pouco de JavaScript, estou bem com isso. meu código até agora: #container { width: …

15 html  css  css-animations  css-transforms