css transform explanation and demo (on chrome)

2D or 3D transform property of the application to the element conversion. This property allows us to elements rotate, scale, or tilting movement.

Transform: (css3 conversion)

Note: These effects when superimposed, separated by a space

Effect: the elements can be moved, scaled, rotated, elongated, stretched

Conversion: make an effect element changes the shape, size, location

Transform: conversion method:

1, translate () method

translate (x): x along axis x

translate (y): y along the y-axis

translateXY (x, y): x along axis x, y along the y-axis

code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #origin{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        #translateX{
            width: 100px;
            height: 100px;
            background-color: red;
            transform: translateX(100px);
        }
        #translateY{
            width: 100px;
            height: 100px;
            background-color: red;
            transform: translateY(100px);
        }
        #translateXY{
            width: 100px;
            height: 100px;
            background-color: red;
            transform: translate(100px, 100px);
        }
    </style>
</head>
<body>

<div id="origin">
</div>
<div id="translateX">
</div>
<div id="translateY">
</div>
<div id="translateXY">
</div>
</body>
</html>

Results are as follows:

Note: translate (200px), in fact, equivalent to translateX (200px).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #origin{
            width: 100px;
            height: 100px;
            background-color: red;
            transform: translate(200px);
        }
    </style>
</head>
<body>

<div id="origin">
</div>
</body>
</html>

effect:

translate () method 3D conversion

It is more of a change in the z-axis.

<! DOCTYPE HTML> 
<HTML lang = "EN"> 
<head> 
    <Meta charset = "UTF-. 8"> 
    <title> the Title </ title> 
    <style> 

        #parent { 
            width: 500px; 
            height: 500px; 
            -webkit -perspective: 1000px; / * plane distance from the lens, the lens in the center by default, may be adjusted by perspective-origin * / 
            -webkit-perspective-origin: 50px 50px; / * * viewpoint particular position / in the plane 
        } 

        #origin { 
            width: 100px; 
            height: 100px; 
            position: Absolute; 
            Top: 0px; 
            left: 0px; 
            background-Color: Red;
        }

        #translateZ {
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: blue;
            -webkit-transform: translate3d(50px, 50px, 50px);
        }

    </style>
</head>
<body>
<div id="parent">
    <div id="origin">
    </div>
    <div id="translateZ">
    </div>
</div>
</body>
</html>

Perspective need to set the attribute of the parent element under such conditions