Css3 transition and 2d transformation-Review and css32d transformation Review

Css3 transition and 2d transformation-Review and css32d transformation Review

1. transition
Syntax: transition: property duration timing-function delay;
Transition-property: Specifies the css attribute name of the transition effect.
Syntax: transition-property: none | all | property
If none has no attribute, it will get an excessive effect.
All attributes will be overly effective.
Property defines the list of css attribute names for over-performance applications. The list is separated by commas.
Indent element property name
How many seconds or milliseconds does the transition-duration take to complete the excessive effect?
Syntax: transition-duration: time;
Time specifies the time required to complete the transition. The default value is 0, indicating no effect.
Transition-timing-function specifies the speed curve of the speed effect.
Syntax: transition-timing-function: linear | partition-in | partition-out | partition-in-out | cubic-bezr (n, n );
Linear specifies the excessive effect starting at the same speed to the end.
Begin specifies that the slow speed starts, then the side is fast, and then the slow speed ends.
Slow-in specifies the excessive effect starting with a slow speed.
Timeout-out specifies the excessive Effect of ending at a slow speed.
Transition-in-out specifies the transition effect starting and ending at a slow speed.
Cubic-bezr (n, n) defines its own value in cubic-bezr. The possible value is a value between 0 and 1.
Transition-delay
Syntax: transititon-delay: time;
Time specifies the time to wait before the transition effect starts.

Example:
<Style>
. Box {width: 100px; height: 100px; background: red; transition: width 1 s ;}
. Box: hover {background: blue; width: 300px; height: 150px ;}
</Style>
<Div class = "box"> </div>
Result:

　　　　　　　　

Example: (besell curve)
<Style>
. Box {width: 100px; height: 100px; background: red; transition: 5 swidth cubic-bezr (0.145, 1.295, 0.000, 1.610 );}
. Box: hover {width: 500px ;}
</Style>
<Div class = "box"> </div>
Result:

　　　　　　　　

Example: (Multiple changes are written together)
<Style>
. Box {width: 100px; height: 100px; background: red; transition: 1 swidth, 2 s height, 3 s background ;}
. Box: hover {width: 300px; height: 150px; background: blue ;}
</Style>
<Div class = "box"> </div>
Result:

　　　　　　

2. transform
In css3, transform mainly includes rotating rotate, twisting skew, scaling scale and moving translate, and matrix deformation matrix.
Syntax: transform: none | <transform-function> [<transform-function>] *
That is, transform: rotate | scale | skew | translate | matrix;

None indicates how to transform without entering; <transform = function> indicates one or more transformation functions separated by spaces;
Rotate, scale, and translate, but we need to remind you that in the past, the overlay effects were separated by commas,

However, multiple attributes in the transform must be separated by spaces. We remember that they are separated by spaces.

Rotate
Specify a 2D rotation (2D rotation) for the original element using the specified angle parameter. The transform-origin attribute must be defined first.
Transform-origin defines the basis of rotation, where angle indicates the rotation angle.
If the set value is positive, it indicates clockwise rotation. If the set value is negative, it indicates clockwise rotation.
For example: transform: rotate (30deg ):
Move translate
Moving translate can be divided into three situations: horizontal and vertical directions of translate (x, y) move at the same time (that is, the x axis and y axis move at the same time); translateX (x) moving horizontally only (X axis moving translateY (Y) moving vertically only (Y axis moving)

Scale
Scaling scale is very similar to moving translate, and it also has three situations: scale (x, y) enables horizontal and vertical scaling of elements (that is, simultaneous scaling of the x and y axes ); scaleX (x) only scales horizontally (x axis );
ScaleY (y) elements only scale vertically (y-axis), but they have the same zooming center and base,
The center point is the center position of the element. The zoom base is 1. If the value is greater than 1, the zoom in is displayed. If the value is smaller than 1, the zoom out is performed.

Distorted skew
Twisting skew and translate, secale skew (x, y) causes the element to twist both horizontally and vertically (the x and y axes are distorted at a certain angle); skewX (x) only causes horizontal distortion of elements (X axis distortion );

SkewY (y) only causes distortion of elements in the vertical direction (y axis)

Matrix
Matrix (<number>, <number>,
<Number>) to a (a, B, c, d, e, f)
The form of transformation matrix specifies a 2D transformation, which is equivalent to directly applying a [a B c d e f] transformation matrix. Is based on the horizontal direction (X axis) and vertical
The orientation (Y axis) is used to reposition the element. The main function of changing the base point transform-origin of the element is to change the base point of the element before performing the transform action,
Because the default base point of an element is its central location. In other words, if we do not use transform-origin to change the base point of an element,
Transform's rotate, translate, scale, skew, matrix and other operations all change with the element's own central position.

Example: (rotate)
<Style>
. Box {width: 100px; height: 100px; background: red; margin: 100px auto 0; transition: 2 s ;}
. Box: hover {-webkit-transform: rotate (45deg );}
</Style>
<Div class = "box"> 111 </div>
Result:

　　　　　　　　　　

Example: (displacement)
<Style>
. Box {width: 100px; height: 100px; background: red; margin: 100px auto 0; transition: 2 s ;}
. Box: hover {-webkit-transform: translate (-100px, 200px );}
</Style>
<Div class = "box"> 111 </div>
Result: The position of the element changes.

Example: (zoom)
<Style>
. Box {width: 100px; height: 100px; background: red; margin: 100px auto 0; transition: 2 s ;}
. Box: hover {webkit-transform: scale (2 );}
</Style>
<Div class = "box"> 111 </div>
Result:

　　　　　　　　　　

Example: (distorted)
<Style>
. Box {width: 80px; height: 80px; background: red; margin: 100px auto 0; transition: 2 s ;}
. Box: hover {-webkit-transform: skewX (45deg );}
</Style>
<Div class = "box"> 111 </div>
Result:

　　　　　　　　　　

Example: (matrix)
<Style>
. Box {width: 80px; height: 80px; background: red; margin: 100px auto 0; transition: 2 s ;}
. Box: hover {-webkit-transform: matrix (0.5, 0.38,-0.38, 0, 0 );}
</Style>
<Div class = "box"> 111 </div>
Result:

　　　　　　　　　　

Demo example:
<Style id = "css">
# Wrap {width: 200px; height: 200px; border: 2px solid #000; margin: 100px auto; border-radius: 50%; position: relative ;}
# Wrap ul {margin: 0; padding: 0; height: 200px; position: relative; list-style: none ;}
# Wrap ul li {width: 2px; height: 6px; background: #000; position: absolute; left: 99px; top: 0;-webkit-transform-origin: center 100px ;}
# Wrap ul li: nth-of-type (5n + 1) {height: 12px ;}
# Hour {width: 6px; height: 45px; background: #000; position: absolute; left: 97px; top: 55px;-webkit-transform-origin: bottom ;}
# Min {width: 4px; height: 65px; background: #999; position: absolute; left: 98px; top: 35px;-webkit-transform-origin: bottom ;}
# Sec {width: 2px; height: 80px; background: red; position: absolute; left: 99px; top: 20px;-webkit-transform-origin: bottom ;}
. Ico {width: 20px; height: 20px; background: #000; border-radius: 50%; position: absolute; left: 90px; top: 90px ;}
</Style>
<Div id = "wrap">
<Ul id = "list">
</Ul>
<Div id = "hour"> </div>
<Div id = "min"> </div>
<Div id = "sec"> </div>
<Div class = "ico"> </div>
</Div>
<Script>
Var oList = document. getElementById ("list ");
Var oCss = document. getElementById ("css ");
Var oHour = document. getElementById ("hour ");
Var oMin = document. getElementById ("min ");
Var oSec = document. getElementById ("sec ");
Var aLi = "";
Var sCss = "";
For (var I = 0; I <60; I ++)
{
SCss + = "# wrap ul li: nth-of-type (" + (I + 1) + ") {-webkit-transform: rotate ("+ I * 6 +" deg );}";
ALi + = "<li> </li>"
}
OList. innerHTML = aLi;
OCss. innerHTML + = sCss;
ToTime ();
SetInterval (toTime, 1000 );
Function toTime ()
{
Var oDate = new Date ();
Var iSec = oDate. getSeconds ();
Var iMin = oDate. getMinutes () + iSec/60;
Var iHour = oDate. getHours () + iMin/60;
OSec. style. WebkitTransform = "rotate (" + iSec * 6 + "deg )";
OMin. style. WebkitTransform = "rotate (" + iMin * 6 + "deg )";
OHour. style. WebkitTransform = "rotate (" + iHour * 30 + "deg )";
};
</Script>
Result: