2d/3d Conversion

Transform

Translate moving translate (10px,100px) is meaningful with transitions or animations

Transition-delay () Transition delay time

Transition-timing-function: Linear over

Transition-property:all; The element participates in the attribute, all means all

Rotate clockwise rotation negative number is counterclockwise rotate (45deg)
Scale Zoom reduction transform:scale (n); X-Axis y-axis magnification reduction

Matrix () [combined operation] six parameters to operate together

. div:hover{

Transform:skew (30deg 30deg);

Transition-property:all;

transition-duration:3s;

Transition-timing-function:linear;

}

Anmation

The properties of this animation are:

Animation-name Animation Name

Animation-duration Animation time

Animation-timing-function mode (linear constant speed ease acceleration and deceleration ease-in acceleration ease-out deceleration ease-in-out slow start and end)

Animation-delay delay time before animation starts

Animation-iteration-count Animation times

Animation-direction whether reverse

@-Browser-keyframes Name {

from{}to{}

}



. div{

height:100px;

width:100px;

background:red;

margin-left:200px;

margin-top:200px;

Float:left;

position:relative;

}

div{

Animation:aa 2s infinite;

}

@keyframes AA

{

from {left:0px;}

to {left:200px;}

}





<div class= "Div" >11</div>



div{

width:100px;

height:100px;

background:red;

/*position:relative;*/

ANIMATION:AA 2s linear infinite;

}

@keyframes AA {

0%{

Transform:translate (0 0);

}

100%{

Transform:tr

2d/3d Conversion