CSS3 2D Transforms Methods
translate()rotate()scale()skewX()skewY()matrix()
1> translate()
- The
translate()method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis).
2> rotate()
- The
rotate()method rotates an element clockwise or counter-clockwise according to a given degree.
Example
div {
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /* Safari */
transform: rotate(20deg);
}
3> scale()
- The
scale()method increases or decreases the size of an element (according to the parameters given for the width and height).
4> skewX（沿X轴形变）
- The
skewX()method skews an element along the X-axis by the given angle.
5> skewY（沿Y轴形变）
- The
skewY()method skews an element along the Y-axis by the given angle.
6> skew（沿X和Y轴形变）
- The
skew()method skews an element along the X and Y-axis by the given angles.
7> matrix()
- The
matrix()method combines all the 2D transform methods into one.
Example
div {
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
CSS3 3D Transforms
rotateX()rotateY()rotateZ()
1> rotateX()
- The
rotateX()method rotates an element around its X-axis at a given degree.
2> rotateY()
- The
rotateY()method rotates an element around its Y-axis at a given degree.
3> rotateZ()
- The
rotateZ()method rotates an element around its Z-axis at a given degree:
Example
div {
-webkit-transform: rotateZ(90deg); /* Safari */
transform: rotateZ(90deg);
}
CSS3 Transitions
- Specify the CSS property you want to add an effect to.
- Specify the duration of the effect.
Note: If the duration part is not specified, the transition will have no effect, because the default value is 0.
syntax
transition: property duration timing-function delay|initial|inherit;
Example
input[type=text] {
width: 100px;
-webkit-transition: ease-in-out, width .35s ease-in-out; /* Safari 3.1 to 6.0 */
transition: width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
}
1> transition-property
- Specify the name of the CSS property
syntax
transition-property: none|all|property|initial|inherit;
Example
div {
-webkit-transition-property: width, height; /* Safari */
transition-property: width, height;
}
div:hover {
width: 300px;
height: 300px;
}
2> transition-duration
- Specifies how many seconds (s) or milliseconds (ms) a transition effect takes to complete.
syntax
transition-duration: time|initial|inherit;
Example
div {
-webkit-transition-duration: 5s; /* Safari */
transition-duration: 5s;
}
3> transition-delay
- The transition-delay property specifies when the transition effect will start.
- The transition-delay value is defined in seconds (s) or milliseconds (ms).
syntax
transition-delay: time|initial|inherit;
Example
div {
-webkit-transition-delay: 2s; /* Safari */
transition-delay: 2s;
}
4> transition-timing-function
- The transition-timing-function property specifies the speed curve of the transition effect.
- This property allows a transition effect to change speed over its duration.
syntax
transition-timing-function: ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()|initial|inherit;
| Value | Description |
|---|---|
| ease | Default value. Specifies a transition effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1)) |
| linear | Specifies a transition effect with the same speed from start to end (equivalent to cubic-bezier(0,0,1,1)) |
| ease-in | Specifies a transition effect with a slow start (equivalent to cubic-bezier(0.42,0,1,1)) |
| ease-out | Specifies a transition effect with a slow end (equivalent to cubic-bezier(0,0,0.58,1)) |
| ease-in-out | Specifies a transition effect with a slow start and end (equivalent to cubic-bezier(0.42,0,0.58,1)) |
| cubic-bezier(n,n,n,n) | Define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1 |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
Example
/* For Safari 3.1 to 6.0 */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;} /* Standard syntax */
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
CSS3 Animations
1> animation
syntax
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
Example
div {
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
2> animation-name
- The animation-name property specifies a name for the @keyframes animation.
syntax
animation-name: keyframename|none|initial|inherit;
Example
/* The animation code */
@keyframes mymove {
from {background-color: red;}
to {background-color: yellow;}
} /* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: mylove;
animation-duration: 4s;
}
3> animation-duration
syntax
animation-duration: time|initial|inherit;
4> animation-timing-function
syntax
animation-timing-function: linear|ease|ease-in|ease-out|cubic-bezier(n,n,n,n)|initial|inherit;
5> animation-delay
syntax
animation-delay: time|initial|inherit;
6> animation-iteration-count
- The animation-iteration-count property specifies the number of times an animation should be played.
syntax
animation-iteration-count: number|infinite|initial|inherit;
7> animation-direction
syntax
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
?? 8> animation-fill-mode
- The animation-fill-mode property specifies a style for the element when the animation is not playing (when it is finished, or when it has a delay).
syntax
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
9> animation-play-state
- The animation-play-state property specifies whether the animation is running or paused.
syntax
animation-play-state: paused|running|initial|inherit;
Example
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
div:hover {
-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
animation-play-state: paused;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
@keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
</style>
Animation example1
div {
animation: example 5s linear 2s infinite alternate;
}
Animation example2
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body> <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p> <div></div> </body>
</html>