CSS3 summary of Transformation

A, 2D conversion

 

• Translate (npx, npx) 

　　

　　Relative to the current position of the mobile element

/ * Achieve div moved 50 pixels to the left, and the mobile 100 pixels * / 

div
 { 
            Transform : Translate (50px, 100px) ; 
        -ms-Transform : Translate (50px, 100px) ; / * IEs. 9 * / 
    - Transform-WebKit : Translate (50px, 100px) ; / * Safari and the Chrome * / 
}

 

• rotate(ndeg) 

　

　　Relative current angle of rotation

/ * Achieve div 30 degrees clockwise rotation * / 

div
 { 
            Transform : Rotate (30deg) ; 
        -ms-Transform : Rotate (30deg) ; 
    -webkit-Transform : Rotate (30deg) ; 
}

 

• scales (n, n) 

　　

　　Relative to the current size scaling

/ * Achieve div 2 times the width of the elongated, highly increased 3 times * / 

div
 { 
            Transform : Scale (2,3) ; 
        -ms-Transform : Scale (2,3) ; 
    -webkit-Transform : Scale (2,3) ; 
}

 

• skew(ndeg,ndeg) 

　　

　　Angle of inclination relative to the current perspective

/ * Achieve div inclined in the X and Y axes, respectively 20 and 30 degrees * / 

div
 { 
            Transform : skew (30deg, 20deg) ; 
        -ms-Transform : skew (30deg, 20deg) ; 
    -webkit-Transform : skew ( 30deg, 20deg) ; 
}

 

• matrix(n,n,n,n,n,n) 

 　

　　Composite properties, comprising six parameters are rotating, scaling, movement (pan) and tilt functions

/ * Achieve rotation div [deg.] 30 * / 

div
 { 
            Transform : Matrix (0.8,0.5, -0.5,0.8,0,0) ; 
        -ms-Transform : Matrix (0.8,0.5, -0.5,0.8,0,0) ; 
    Transform--webkit : Matrix (0.8,0.5, -0.5,0.8,0,0) ; 
}

 

Two, 3D conversion

 

• rotateX(ndeg) 

　　

　　Relative current angle of rotation about the X axis

/ * Achieve div 45 degree rotation about the X-axis * / 

div
 { 
            Transform : rotateX (45deg) ; 
    -webkit-Transform : rotateX (45deg) ; 
}

 

• rotateY(ndeg) 

　　

　　Relative current angle of rotation about the Y axis

/ * Achieve div 45 degrees rotation about the Y axis * / 

div
 { 
            Transform : rotateY (45deg) ; 
    -webkit-Transform : rotateY (45deg) ; 
}

 

• rotateZ(ndeg) 

　　

　　Relative current angle of rotation about the Z axis

/ * Achieve div 45 degrees of rotation about the Z axis * / 

div
 { 
            Transform : rotateZ (45deg) ; 
    -webkit-Transform : rotateZ (45deg) ; 
}

 

• 3D conversion of translate

• translateX(npx) 

　　

　　相对当前元素位置沿X轴移动

• translateY(npx) 

　　相对当前元素位置沿Y轴移动

• translateZ(npx) 

　　相对当前元素位置沿Z轴移动

• translate3d(x,y,z)

 

 

• 3D转换之scale

• scaleX(n)

　　

　　相对当前元素位置沿X轴缩放

• scaleY(n)

　　相对当前元素位置沿Y轴缩放

• scaleZ(n)

　　相对当前元素位置沿Z轴缩放

• scale3d(x,y,z)

 

• 3D转换之rotate

• rotateX(ndeg) 

　　

　　相对当前元素位置沿X轴旋转

• rotateY(ndeg) 

　　相对当前元素位置沿Y轴旋转

• rotateZ(ndeg) 

　　相对当前元素位置沿Z轴旋转

• rotate3d(xdeg,ydeg,zdeg)