Questão 2572201

• Banca: PUC-PR
• Órgão: TJ-MS
• Ano: 2017
• Provas: PUC-PR - 2017 - TJ-MS - Técnico de Nível Superior - Web Designer
• Disciplina: Programação
• Assuntos: CSS (Cascading Style Sheets)

Em relação à inclusão de imagens utilizando CSS, assinale a alternativa CORRETA.

• A. É possível transformar a imagem com efeitos de escala, rotação, translação e distorção angular (skew). O código abaixo exemplifica isto: img {-webkit-transform: scale(1.5) skew(30deg); /*webkit*/ -moz-transform: scale(1.5) skew(30deg); /*gecko*/ -o-transform: scale(1.5) skew(30deg); /*opera*/ transform: scale(1.5) skew(30deg); /*browsers sem prefixo*/ }
  
• B. Existe a possibilidade de inclusão de imagens, mas sem alterações que deformem a imagem. O exemplo abaixo demonstra somente as operações possíveis: img { -webkit-transform: scale(1.5) translate(1.5) /*webkit*/ -moz-transform: scale(1.5) translate (1.5) /*gecko*/ -o-transform: scale(1.5) translate (1.5) /*opera*/ transform: scale(1.5) translate (1.5) /*browsers sem prefixo*/ }
  
• C. As alterações na imagem dependem sempre da definição de uma origem, não há como ativar estas operações sem antes definir o ponto de referência, que é feito da seguinte forma: img { transform-origin: X10px Y10px; }Repare que não há necessidade de indicar qual o motor de layout.
  
• D. As alterações na imagem são em relação a uma origem ou referência. Como padrão sempre ocorrem tendo como âncora o centro da imagem. O código abaixo exemplifica a definição da âncora:img {-webkit-transform-origin: X10px Y10px Z10px; /* para webkit */ -moz-transform-origin: X10px Y10px Z10px; /* para webkit */ -o-transform-origin: X10px Y10px Z10px; /* para webkit */ transform-origin: X10px Y10px Z10px; /* para webkit */ }
  
• E. As alterações na imagem são em relação a uma origem, ou referência. Como padrão sempre ocorrem tendo como âncora o centro da imagem. O código abaixo exemplifica a definição da âncora:img { transform-origin: X10px Y10px Z10px;} Repare que não há necessidade de indicar qual o motor de layout.
  

Gabarito: A

Comentários

• https://www.w3schools.com/css/css3_2dtransforms.asp

  https://www.w3schools.com/css/tryit.asp?filename=trycss3_transform_skew