1. Let us talk about css coordinate system:
the positive x-axis direction is the rightward horizontal direction
the positive direction of the y-axis is vertically downward direction
the positive direction of the z-axis direction is the screen to the user
2. Displacement
translate (x, y): 2d displacement
translateX (n) provided x-axis direction displacement
translateY (n) of the y-axis direction displacement is provided
translate3d (x, y, z) : 3d displacement
translateZ (n) set the displacement direction of the z-axis
Parameter may be a specific pixel value may be a percentage (based on their width and height)
grammar:
transform:translate(200px,0);
3. Zoom
scale (x, y) 2d scaling, if only pass a value, then x, y is the value
scaleX (n) scaled x-axis direction is provided
scaleY (n) of the y-axis direction is provided Scale
scale3d (x, y, z) 3d scaling
grammar:
transform:scale(2);
3. Turn
rotate () 2d is rotated clockwise
rotate3d (x, y, z) 3d rotation
rotateX (angle) about the x axis
rotateY (angle) about the y-axis
rotateZ (angle) of rotation about the z axis
grammar:
transform:rotate(45deg)
To achieve 3d perspective, we need to set
/* 3d模式 */
transform-style: preserve-3d;
/* 视距 */
perspective: 1200px;rotateX effect
transform: rotateX(360deg);
rotateY effect
transform: rotateY(360deg);
rotateZ effect
transform: rotateZ(360deg);
4.transform-origin
This property is used to set the element at the point Transform, the default is the center of the element, i.e. center center
his values are the following:
specific numerical example 50px 50px
keywords left right top bottom center
percentage 20% 20% (based on the element size )
Examples of rotation in front of us is the center of rotation based on the element
Modified to convert the top-left corner point
transform-origin: 0 0;
And translate the common 5.scale
If the scale () preceding the front, the actual displacement = * scale setting multiple shift
recommendation translate EDITORIAL
transform: translate(300px,0) scale(2) ;
//以 容器的中心点来计算，容器位移了300px
transform: scale(2) translate(200px,0);
//以 容器的中心点来计算，容器位移了400px
transform: scale(3) translate(100px,0);
//以 容器的中心点来计算，容器位移了300px
transform: scale(0.5) translate(200px,0);
//以 容器的中心点来计算，容器位移了100px6.translate () and rotate () common
rotate () translate the words written on the front of the coordinate system will change, thus changing translate settings, so if the set is multi-valued, the proposal to translate () EDITORIAL