Code icon

CSS - TRANSFORM

Links


    // TRANSFORM
    Better for position and size than animation. Doesn't move other elements
    Can Be included inside an animation
    Different tipes of transforms: scale(1, 1,25), rotate(90deg), translate
    transform: scale(1, 1.5); /*scale() scaleX() scaleY() */
    transform: rotate(90deg); /*rotate() rotateX() rotateY() */
    transform: translate(100px, 50px); /*translate translateX() transtlateY() */
    translate(100%) translates depending on his own size. Good for centering (-50%)
    custom properties (--scale: 2) cannot animate with transform