css3-2D变换

• 位移

• 对行内元素无效

            /* X轴位移 */
            transform: translateX(50px);
            transform: translate(50px);

            /* Y轴位移 */
            transform: translateY(50px);

            /* X和Y轴位移 */
            transform: translate(50px, 50px);
            transform: translateX(50px) translateY(50px);

• 缩放

*对行内元素无效

            /* X轴缩放，值可以为负数 */
            transform: scaleX(1.5);

            /* Y轴缩放, 值可以为负数 */
            transform: scaleY(1.5);

            /* X轴和Y轴缩放 */
            transform: scale(1.5);
            transform: scale(1.5, 1.3);

• 旋转

• 会影响坐标系，书写时需放在最后设置

            /* 平面旋转,正值为顺时针，负值为逆时针 */
            transform: rotateZ(30deg);
            transform: rotate(30deg);

• 扭曲

            /* X轴扭曲 */
            transform: skewX(30deg);
            transform: skew(30deg);

            /* Y轴扭曲 */
            transform: skewY(30deg);

            /* X轴和Y轴扭曲 */
            transform: skew(30deg, 30deg);
            transform: skewX(30deg) skewY(30deg);

• 变换原点

            transform-origin: 50px 50px;
            transform-origin: left top;
            transform-origin: 25% 25%;
            /* 一个值时需注意值 */
            transform-origin: left;