Common CSS styles (3) and css styles

Common CSS styles (3) and css styles

1. 2D Transformation

　　1. transformSet or retrieve object Conversion

Valid value:

None: specify a 2D transformation in the form of a (a, B, c, d, e, f) transformation matrix containing six values, which is equivalent to directly applying a [a, B, c, d, e, f] Transformation Matrix

Translate (<length> [, <length>]). The first parameter corresponds to the X axis, and the second parameter corresponds to the Y axis. If the second parameter is not provided, the default value is 0.

TranslateX (<length>): Specifies the translation of the X axis (horizontal direction) of the object.

TranslateY (<length>): Specifies the translation of the object's Y axis (vertical direction ).

Rotate (<angle>): Specify the 2D rotation (2D rotation) of the object ). The first parameter corresponds to the X axis, and the second parameter corresponds to the Y axis. If the second parameter is not provided, the value of the first parameter is used by default.

ScaleX (<number>): Specifies the (horizontal) scaling of the X axis of the object.

ScaleY (<number>): Specifies the (vertical) scaling of the Y axis of the object.

Skew (<angle> [, <angle>]): Specifies the object skew transformation (skew ). The first parameter corresponds to the X axis, and the second parameter corresponds to the Y axis. If the second parameter is not provided, the default value is 0 skewX (<angle>): Specifies the (horizontal) distortion of the X axis of the object.

SkewY (<angle>): Specifies the (vertical) distortion of the Y axis of the object.

Note: different browsers need to write the following prefix.

Kernel type	Writing Method
Webkit (Chrome/Safari)	-Webkit-transform
Gecko (Firefox)	-Moz-transform
Presto (Opera)	-O-transform
Trident (IE)	-Ms-transform
W3C	Transform

 

 

 

 

 

 

Example:

CSS code:

      #transform1        {            margin: 0 auto;            width: 100px;            height: 100px;            background-color: mediumvioletred;            -webkit-transform: rotate(15deg);         }

HTML code:

<Div id = "transform1"> Rotated for 15 degrees </div>

2. transform-originSets or retrieves an object to convert to a specific origin.

Valid value:

<Percentage>: Specify the coordinate value by percentage. It can be a negative value.

<Length>: Specify the coordinate value with the length value. It can be a negative value.

Left: the abscissa of the specified origin is leftcenter ①: the abscissa of the specified origin is

Centerright: the abscissa of the specified origin is

Righttop: The ordinate of the specified origin is

Topcenter ②: The ordinate of the specified origin is

Centerbottom: specifies that the ordinate of the origin is bottom.

Different browsers:

Kernel type	Writing Method
Webkit (Chrome/Safari)	-Webkit-transform-origin
Gecko (Firefox)	-Moz-transform-origin
Presto (Opera)	-O-transform-origin
Trident (IE)	-Ms-transform-origin
W3C	Transform-origin

　　

 

 

 

 

Example:

CSS code:

# Transform1 {margin: 0 auto; width: 100px; height: 100px; background-color: mediumvioletred;-webkit-transform: rotate (15deg ); /* rotate for 15 degrees */-webkit-transform-origin: left top;/* rotate at the origin in the upper left corner */}

HTML code:

<div id="transform1"></div>

　　

　　　Ii. Transition Style

　　　　1. transition-property Retrieves or sets the attributes of the object involved in the transition.

Valid value:

All: all css attributes that can be transitioned

None: do not specify the css attribute of the transition.

Attributes With transition effect:

　　

Example:

CSS code:

         #transform1        {            margin: 0 auto;            width: 100px;            height: 100px;            background-color: red;            transition-property: background-color;                    }        #transform1:hover        {            transition-duration:.5s;            transition-timing-function:ease-in;            background-color: yellow;        }                

HTML code:

<Div id = "transform1"> place the cursor over it </div>

Place the cursor above 2. transition-duration: Retrieves or sets the object transition duration. Transition-duration: for the time example, see the previous example.
3. transition-timing-function Retrieves or sets the animation type for transition in an object.
Value: linear. Equivalent to the besell curve (0.0, 0.0, 1.0, 1.0) transition: smooth transition. Equivalent to the besell curve (0.25, 0.1, 0.25, 1.0) between-in: from slow to fast. Equivalent to the beiser curve (0.42, 0, 1.0, 1.0) Forward-out: From fast to slow. It is equivalent to the curve (0, 0, 0.58, 1.0) between-in-out: from slow to fast to slow. Equivalent to the besserl curve (0.42, 0, 0.58, 1.0), which is <number >,< number>, the four values must be in the range [0, 1. See the previous example. 4. transition-delay Sets the object delay transition time.  　　CSS code:

        #delay1        {            background-color: antiquewhite;            width:100px;            height:100px;                        }        #delay1:hover        {            transition-delay:1s;            transition-timing-function:ease-in;            background-color: black;        }        #delay2        {            background-color: antiquewhite;            width:100px;            height:100px;                        }        #delay2:hover        {            transition-delay:4s;            transition-timing-function:ease-in;            background-color: blue;        }            

　　HTML code;

<Div id = "delay1"> transition starts after 1 S </div> <div id = "delay2"> transition starts after 4s </div>

After 1 s delay, the transition starts after 4s. * ** In general, deformation and transition can be combined to produce some special effects.Example: CSS code:

        #all        {            width: 100px;            height: 100px;            background-color: red;                    }        #all:hover        {            background-color: yellow;            transition-delay: .5s;            transition-timing-function: ease-in;            transform: scale(1.5,1.5);            transition-duration: 1s;        }                        

HTML code:

<Div id = "all"> place the cursor over it to view the effect </div>

Place your mouse over to view the effect