CSS3 Transitions and 2d transformations--Review

1.transition
Syntax: transition:property duration timing-function delay;
Transition-property CSS property name to set the transition effect
Syntax: Transition-property:none | All | Property
None no attribute will get over effect
All properties will get an over-effect.
The property defines a list of applied over-effects CSS attribute names, with a comma-separated list.
Indent Element Property Name
Transition-duration How many seconds or milliseconds it takes to complete an over-effect
Syntax: Transition-duration:time;
TIME specifies how long it will take to complete the transition effect. The default value is 0, which means no effect
Transition-timing-function a speed curve that specifies the speed effect.
Syntax: Transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier (n,n,n,n);
Linear provides for excessive effects that start at the same speed to the end.
Ease the slow speed starts, then the side is fast, then the slow speed ends.
Ease-in the excessive effects that begin at a slow speed.
The ease-out specifies an over-effect that ends at a slow speed.
Ease-in-out the transition effect that starts and ends at a slow speed.
Cubic-bezier (n,n,n,n) defines its own value in Cubic-bezier, and the possible value is a number from 0 to 1.
Transition-delay define when an over-effect starts
Syntax: Transititon-delay:time;
TIME specifies how long to wait before the transition effect begins.

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

　　　　　　　　

Example: (Bézier curve)
<style>
. box{width:100px;height:100px;background:red; transition:5swidth cubic-bezier (0.145,1.295,0.000,1.610);}
. box:hover{width:500px;}
</style>
<div class= "box" ></div>
Results:

　　　　　　　　

Example: (write with multiple variations)
<style>
. box{width:100px;height:100px;background:red; transition:1swidth,2s height,3s background;}
. Box:hover{width:300px;height:150px;background:blue;}
</style>
<div class= "box" ></div>
Results:

　　　　　　

2.transform
The letter is the deformation, the meaning of change, in the CSS3 transform mainly include a few, rotating rotate, twisted skew, scaling scale and moving translate as well as matrix deformation matrices
Syntax: Transform:none | <transform-function> [<transform-function>]*
namely: Transform:rotate | Scale | Skew | Translate |matrix;

None means how to transform;<transform=function> represents one or more transform functions, separated by a space;
Rotate,scale,translate three kinds, but we need to remind you that in the past, we have overlapping effects are separated by commas (","),

However, when you use multiple properties in transform, you need a space to separate them. We remember that it is a space-separated.

Rotary Rotate
Specifies a 2D rotation (2D rotation) of the original element with the specified angle parameter, preceded by the definition of the Transform-origin attribute.
Transform-origin defines the base point of the rotation, where angle refers to the angle of rotation
If the value is set to a positive number for clockwise rotation, if the value is set to a negative number, the counter-clockwise rotation is indicated.
such as: Transform:rotate (30deg):
Mobile Translate
Moving the translate we are divided into three cases: translate (x, y) move horizontally and vertically (i.e. simultaneous movement of the axis and the y axis); TranslateX (x) moves horizontally (x-axis movement Translatey (y) Move vertically only (Y-axis movement)

Scaling scale
Scaling scale and moving translate are extremely similar, and he also has three cases: scale (x, y) scales the elements horizontally and vertically (that is, simultaneously scales both the y-axis and both), while the ScaleX (x) element scales horizontally (x-axis scaling);
The ScaleY (Y) elements scale only vertically (Y-axis scaling), but they have the same zoom center point and cardinality,
Its center point is the center of the element, with a scaling base of 1, and if its value is greater than 1, the value is less than 1, and the element shrinks.

Twisted Skew
Distort the skew and Translate,secale skew (x, y) to distort the elements in both horizontal and vertical directions (both the X and Y axes are distorted at a certain angular value); skewx (x) distorts the elements in the horizontal direction only (distortion of the x-axis);

Skewy (y) only distorts the element in the vertical direction (y-axis warp distortion)

Matrices Matrix
Matrix (<number>, <number>, <number>, <number>, <number>,
<number>) with a value of six (a,b,c,d,e,f)
The form of a transformation matrix specifies a 2D transformation, which is equivalent to applying a [a B c D E F] transformation matrix directly. is based on the horizontal direction (x-axis) and vertical
Straight direction (Y axis) reposition element, change the base point of the element transform-origin his main function is to allow us to change the base point position of the element before the transform action.
Because the default base point of our element is its central location, in other words we do not use Transform-origin to change the position of the element base point,
Rotate,translate,scale,skew,matrix such as transform are changed at the center of the element's own location.

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

　　　　　　　　　　

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

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

　　　　　　　　　　

Example: (WARP)
<style>
. box{width:80px;height:80px;background:red;margin:100px auto 0; transition:2s;}
. BOX:HOVER{-WEBKIT-TRANSFORM:SKEWX (45deg);}
</style>
<div class= "box" >111</div>
Results:

　　　　　　　　　　

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

　　　　　　　　　　

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>
Results:

　　　　　　　　　　

CSS3 Transitions and 2d transformations--Review