CSS3 Reflection deformation Rotation zoom

A. Reflection

:-webkit-box-reflect: Attribute value 1: position [above, below, left, right] property value 2: Spacing Pixel Value Property value 3: Gradient-webkit-box-reflect:- Webkit-linear-gradient (Top,rgba (0,0,0,0) 20%,rgba (0,0,0,0.6)) two. Deformation transform rotation: rotate (90deg) deformation origin: Transform-origin : [Percentage | length | left | center | right] [percentage | length | top | center | bottom]translate (length[, length]): Specifies the 2D translation (2D translation) of the object. The first parameter corresponds to the x-axis, and the second parameter corresponds to the y-axis. TranslateX (length): Specifies the Translatey (length) of the object's x-axis (horizontal direction): Specifies the translation scaling of the y-axis (vertical direction) of the object: scale (number[, number]): Specifies the 2D of the object Scale (2D scaling). The first parameter corresponds to the x-axis, and the second parameter corresponds to the y-axis. ScaleX (number): Specifies the (horizontal) scaling ScaleY (number) of the x axis of the object: Specifies the (vertical) scaling distortion of the y-axis of the object: skew (angle [, angle]): Specifies the object skew Transformation (skew-cut twist). The first parameter corresponds to the x-axis, and the second parameter corresponds to the y-axis. Skewx (angle): Specifies the (horizontal) distortion of the x-axis of the object Skewy (angle): Specifies that the y-axis of the object (vertical direction) is distorted by The matrix (A,B,C,D,E,F) ad representation is larger, SCALE,BC represents a twist, and EF represents panning.

CSS3 Reflection deformation Rotation zoom