TRANSFORMACIONES

CSS STYLE

            
            style>
                a:link{
                    color: rgb(15, 82, 59);
                }
                a:visited{
                    color: rgb(27, 0, 177);
                }
                a:nth-child(1){ // seudo clases
                    background-color: antiquewhite;
                }

                a::before{ // seudo elementos
                    content: ":)   ";
                }
            /style>

            
PROPIEDAD TRANSFORM
                
                
transform: 
                translateX(20px, -20px) // de un punto "a" a un punto "b" || X o Y
                scale(1.2) // agranda los objetos|| también se puede aplicar a los ejes || X o Y 
                skew(20deg) //deg = grados, una propiedad para deformar
                rotate(20deg) // rota en los ejes X o Y 
                matrix()
            

            

                
transform-origin:
                transform-origin: left top; // Sirver para poder cambiar el punto base de donde inicia el eje de transformación
            

            
PROPIEDADES DE TRANSFORMACIÓN 3D
            
PROPIEDADES:  
                transform-style: preserve-3d; // propiedad del padre
                perspective: 100 px // nos da profundidad  de x cantidad de pixeles|| desde donde se ve el objeto
                perspective-origin: ;// desde dónde inicia el punto de fuja de la perspectiva
                backface visibility:; // podemos girar la card para revelar lo que esta detras|| hay que incluir esta propiedad al padre transform-style: preserve-3d;
            
            
EFECTO PARALLAX
            
El fondo se mueve a una velocidad y el objeto a otra 
                -container{
                    perpective:8 px;
                    perspective-origin: 50%;
                    overflow-x: hidden;
                    overflow-y: scroll;
                    position: relative;
                }
                transform: tranlateZ(2px) scale(0.75);
            
            
TRANSITION PROPERTY Y DURATION
            
 
                transition-property: none | all| property> | initial | inherit;
                transition-duration: time> | initial | inherit; // transition: transform 500ms;
                transtion timing function: linear | ease| ease-in| ease-out| ease-in-out|step-start| step-end|cubic-bezier(n,n,n) // transition-delay:0.5s; // transition:transform 1s liner; //
            
            

                will-change: transform;