O documento discute propriedades de transformações 3D e transições no CSS3. Apresenta exemplos de como aplicar rotações, translações e escalas 3D, além de definir perspectiva, backface-visibility, timing functions e delays em transições.

1. Professor: Daniel Lobão
Estagiário: Carlos Rodrigo

2. Continuar a inovar no projeto;
 2º Avaliação Pacial – 27/04;
Propriedade 3D Transform;
Propriedade Transition;

3. Transform Aplica-se uma transformação 2D ou 3D a
um elemento
Transform-origin Permite mudar a posição sobre elementos
transformados
Transform-style Especifica como elementos aninhados são
renderizados no espaço 3D
Perspective Especifica a perspectiva sobre a forma
como os elementos 3D são vistos
Perspective-origin Especifica a posição inferior de elementos
3D
Backface-visibility Define se deve ou não um elemento deve
ser visível quando não estiver de frente
para a tela

4. Propriedade Descrição
flat Especifica que os elementos filho não vai preservar a
sua posição 3D. Este é o padrão
preserve-3d Especifica que os elementos filho vai preservar a sua
posição 3D
initial Define essa propriedade para o valor padrão.
inherit Herda essa propriedade do seu elemento pai.

5. div {
-webkit-
transform: rotateX(150deg);
transform: rotateX(150deg);
}
div {
-webkit-
transform: rotateY(150deg);
transform: rotateY(150deg);
}

6. div{
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}

8. matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
Define uma transformação 3D, usando
uma matriz de 4x4 de 16 valores
translate3d(x,y,z) Define uma tradução 3D
scale3d(x,y,z) Define uma transformação de escala 3D
rotate3d(x,y,z,angle) Define uma rotação 3D
perspective(n) Define uma vista em perspectiva de um
elemento transformado 3D

10. A propriedade perspectiva define quantos
pixels um elemento 3D é colocado a partir
da vista. Esta propriedade permite-lhe
mudar a perspectiva sobre a forma como
elementos 3D são vistos.

11. A propriedade backface-visibility define
se ou não um elemento deve ser visível
quando não estiver de frente para a tela.
backface-visibility: visible|hidden|initial|inherit;

12. Transições no CSS3 permite alterar os valores
de propriedade sem problemas (de um valor
para outro), durante um determinado período.
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s;
transition: width 2s;
}
div:hover {
width: 100%;
}

13.  Propriedade especifica a curva de velocidade do efeito de transição.
* ease - especifica um efeito de transição com um início lento, em seguida,
rapidamente, em seguida, terminar lentamente (este é o padrão)
* linear - especifica um efeito de transição com a mesma velocidade do início
ao fim
* ease-in - especifica um efeito de transição com um início lento
* ease-out - especifica um efeito de transição com um final lento
* ease-in-out - especifica um efeito de transição com um início lento e no final
* cubic-bezier(n,n,n,n) - permite definir seus próprios valores em uma função
cúbica-bezier.

14. Propriedade especifica um atraso (em
segundos) para o efeito de transição.
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 3s;
-webkit-transition-delay: 1s;
transition: width 3s;
transition-delay: 1s;
}
div:hover {
width: 300px;
}

15. div {
transition: width 2s, height 2s, transform 2s;
}

16. div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}

17. Propriedades:
Transform 3D;
Transition;

18. CSS3 3D Transforms. Elaborado por w3schools. Disponível
em: <http://www.w3schools.com/css/css3_3dtransforms.asp>.
Acesso em: 17 abr. 2016.
THE Matrix Revolutions (CSS 3D – 2). 2010. Elaborado por
Eleqtriq. Disponível em: <http://w3.eleqtriq.com/2010/05/css-
3d-matrix-transformations/>. Acesso em: 17 abr. 2016.
CSS3 Transitions. Elaborado por w3schools. Disponível em:
<http://www.w3schools.com/css/css3_transitions.asp>. Acesso
em: 17 abr. 2016.