O que é -webkit-transform? Para que serve? – css css3 front-end
Pergunta:
Então, direto eu encontro nos CSSs isso -webkit-transform, mas não tenho ideia do que é ou para que serve e deus também não sabe me responder:
Eu ficaria eternamente grato se alguém pudesse me explicar ou me passar algum lugar em que eu possa ler sobre isso. Obs.: Sei ler inglês.
Obrigado pela atenção!!
Autor da pergunta Andrey Hartung
Sergio
O transform é uma ferramenta de CSS moderna. Ela permite fazer zoom, dar perspectivas ou rodar elementos.
O sufixo -webkit- quer dizer que só os browsers que têm estrutura do webkit é que vão usar/ler/aplicar essa regra.
Um exemplo que está na página da MDN e que faz rodar 5 graus um elemento div:
#rotate1
{
height:100px;
background-color: yellow;
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg); /* IE 9 */
-webkit-transform: rotate(5deg); /* Chrome, Safari, Opera */
transform: rotate(5deg);
}<div id="rotate1">
<pre>
height:100px;
background-color: yellow;
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
</pre>
</div>E um exemplo de zoom com rotação:
div {
background:#fcf8b3;
border:1px solid #aaa;
margin:100px;
padding:10px;
width:330px;
-webkit-transition:-webkit-transform 0.2s ease-in-out;
-moz-transition:-moz-transform 0.2s ease-in-out;
transition:transform 0.2s ease-in-out;
}
div:hover {
cursor:pointer;
/* CSS3 */
-webkit-transform:scale(3) rotate(-15deg) skew(-5deg, 30deg);
-moz-transform:scale(3) rotate(-15deg) skew(-5deg, 30deg);
transform:scale(3) rotate(-15deg) skew(-5deg, 30deg);
} <div>
Passa o mouse aqui se vês mal!
</div>Nota:
Em relação à tua pesquisa no Google tens de ter em conta que - no inicio de uma busca quer dizer: “quero resultados sem a palavra -xxxxxx”.
Deves procurar com aspas, assim: "-webkit-transform"
#rotate1
{
height:100px;
background-color: yellow;
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg); /* IE 9 */
-webkit-transform: rotate(5deg); /* Chrome, Safari, Opera */
transform: rotate(5deg);
}<div id="rotate1">
<pre>
height:100px;
background-color: yellow;
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
</pre>
</div>Related Posts:
Qual a diferença entre AppCompatActivity e Activity? – android android-activity
Pergunta:
Qual a diferença da AppCompatActivity para Activity ?
A partir de qual versão a AppCompatActivity foi adicionada ao Android?
Autor da pergunta Luhhh
A diferença reside ...
Como abreviar palavras em PHP? – php string
Pergunta:
Possuo informações comuns como nome de pessoas e endereços, e preciso que elas contenham no máximo 30 caracteres sem cortar palavras.
Exemplo:
'Avenida Natalino João Brescansin' ...
Qual é a finalidade de um parêntese vazio numa declaração Lambda? – c# expressões-lambda característica-linguagem
Pergunta:
Criei um exemplo de uma declaração Lambda sem argumentos, entretanto, estou com duvidas referente a omissão do parêntese vazio () na declaração.
Veja o exemplo:
class ...
Boas práticas para URI em API RESTful – api rest restful
Pergunta:
Estou com dúvida em relação às URIs de alguns recursos da api que estou desenvolvendo. Tenho os recursos projetos e atividades com relação 1-N, ...
Dúvidas sobre a integração do MySQL com Java – java mysql netbeans
Pergunta:
Estou criando um sistema no NetBeans, utilizando a linguagem Java e o banco de dados MySQL. Escrevi o seguinte código para realizar a conexão ...
Qual é a finalidade da pasta Model do framework Inphinit? – php inphinit
Pergunta:
No Inphinit micro-framework existe a pasta Model que fica dentro da pasta application, e nela é onde ficam as classes, mas eu estou muito ...
Uso do ‘@’ em variáveis – javascript typescript coffeescript
Pergunta:
Vejo em algumas linguagens que compilam para javascript, como TypeScript e CoffeeScript, o uso do @ em variáveis, como também, casos em que o ...
Qual tamanho máximo um arquivo JSON pode ter? – json arquivo
Pergunta:
Vou dar um exemplo para conseguir explicar minha duvida:
Preciso recuperar informação de imagens vindas de uma API, esse banco de imagens me retorna JSON's ...
O que é Teste de Regressão? – terminologia engenharia-de-software testes
Pergunta:
Na matéria de Teste de Software o professor abordou um termo chamado Teste de Regressão, isto dentro da disciplina de teste de software. Sendo ...
O que é um construtor da linguagem? – php característica-linguagem
Pergunta:
Em PHP, já li e ouvi várias vezes a respeito dos Construtores da Linguagem. Os casos que sempre ouvi falar deles foi em casos ...
Função intrínseca para converter numérico para string – cobol
Pergunta:
Estou a tentar saber se existe alguma função intrínseca do COBOL para converter um data numérico para string sem precisar usar a cláusula REDEFINES:
( ...
Porque usar implements? – java android
Pergunta:
Qual a diferença entre usar
btn.setOnClickListener(new OnClickListener() {
e
public class MainActivity extends Activity implements OnClickListener{
Estive fazendo um curso de Android e meu professor falou que ...
O que é XHTML e quando deve ser usado? – html xml xhtml
Pergunta:
O que eu sei é que o XHTML precisa ser XML válido. Isso implica, por exemplo, que todas as tags precisam ser fechadas. Por ...
Uma placa aceleradora de vídeo pode melhorar o desempenho não-gráfico? [fechada] – desempenho
Pergunta:
Para desenvolver em Ruby on Rails, eu utilizo aqui uma máquina virtual do VirtualBox com Ubuntu Server 14.04 sem interface gráfica instalada.
Recentemente descobri uma ...
Concat() VS Union() – c# .net
Pergunta:
Qual a diferença entre Concat() e Union() ?
Quando usar Concat() e quando usar Union() ?
Somente pode ser usado em list ?
...