CSS study notes _2D conversion module

2D conversion module:
    1, the rotational
        1.1 format:
            Transform: Rotate (45deg);
        1.2 Meaning:
            represents the number of degrees of rotation
    2, translating:
        2.1 Format:
            Transform: Translate (100px, -100px);
        2.2 Meaning
            first parameter: horizontal direction
            The second parameter: the vertical direction
    3, scale:
        3.1 format
            Transform: scale (1.5,1);
        3.2 * meaning
            first parameter: horizontally scaling
            the second argument: vertically
        3.3 Note points:
            (1) If the value 1 is representative of the same;
            (2) If the value is greater than 1, represents a magnification;
            (3) If the value is less than 1, representing reduced;
            (4) If the same horizontal and vertical, may be a write-only parameter;
    4, Precautions:
        4.1 If you need multiple conversion, then separated by a space, such as:
            Transform: Rotate (45deg) Translate (100px, 0px) Scale (1.5, 1.5)
        4.2 2D conversion module modifies the coordinate system of elements, and then after rotating the translational movement of the new coordinate system with reference to


2D conversion module - the center point of strain
    1, by default, all elements are in their central point for rotation as a reference, can be modified by changing his center point attribute reference point
    2, the format:
        Transform-Origin: 200px 0px;
        first parameter: horizontal direction
        The second parameter: the vertical direction
    3, note points:
        3.1 the value of three forms:
            (1) the specific pixels, such as:
                Transform-Origin: 100px 100px;
            (2) percentage, such as:
                Transform-Origin: 50% 50%;
            ( 3) the special keyword, such as:
                transfrom-Origin: Top left;
        3.2 strain not only on the center point of the rotation, but on the scaling elements, also affect the tilt, but uses fewer companies to develop in the


2D conversion module - rotational axis
    1, by default, all axes are rotated about axis Z
    2, form:
        2.1 around the Z axis:
            Transform: rotateZ (45deg);
        2.2 about the X axis:
            Transform: rotateX (45deg);
        2.3 about the Y axis:
            Transform: rotateY (45deg);


2D conversion module - Perspective properties:
    1, a perspective i.e. near the far small
    2, format:
        perspective: 500px;
    . 3, value:
        value from the mean observed object, the more obvious the greater the value, the more significant the smaller
    4, attention points:
        a perspective presentation attribute must be added to the perspective effect required elements on a higher level (parent) element!


This section specialized words and meanings:
    deg (Degree): degree, degree
    transform: conversion, deformation
    rotate: rotation
    translate: pan  
    scale: zoom ratio of
    origin: Origin
    perspective: perspectives