CSS3 笔记四（Transforms）

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

1 div {
2     -ms-transform: rotate(20deg); /* IE 9 */
3     -webkit-transform: rotate(20deg); /* Safari */
4     transform: rotate(20deg);
5 } 

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

1 div {
2     -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
3     -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
4     transform: matrix(1, -0.3, 0, 1, 0, 0);
5 } 

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

1 div {
2     -webkit-transform: rotateZ(90deg); /* Safari */
3     transform: rotateZ(90deg);
4 } 

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

1 input[type=text] {
2     width: 100px;
3     -webkit-transition: ease-in-out, width .35s ease-in-out; /* Safari 3.1 to 6.0 */
4     transition: width .35s ease-in-out;
5 }
6
7 input[type=text]:focus {
8     width: 250px;
9 }

1> transition-property

• Specify the name of the CSS property

syntax

transition-property: none|all|property|initial|inherit;

Example

1 div {
2     -webkit-transition-property: width, height; /* Safari */
3     transition-property: width, height;
4 }
5
6 div:hover {
7     width: 300px;
8     height: 300px;
9 }

2> transition-duration

• Specifies how many seconds (s) or milliseconds (ms) a transition effect takes to complete.

syntax

transition-duration: time|initial|inherit;

Example

1 div {
2     -webkit-transition-duration: 5s; /* Safari */
3     transition-duration: 5s;
4 }

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

1 div {
2     -webkit-transition-delay: 2s; /* Safari */
3     transition-delay: 2s;
4 }

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;

Example

 1 /* For Safari 3.1 to 6.0 */
 2 #div1 {-webkit-transition-timing-function: linear;}
 3 #div2 {-webkit-transition-timing-function: ease;}
 4 #div3 {-webkit-transition-timing-function: ease-in;}
 5 #div4 {-webkit-transition-timing-function: ease-out;}
 6 #div5 {-webkit-transition-timing-function: ease-in-out;}
 7
 8 /* Standard syntax */
 9 #div1 {transition-timing-function: linear;}
10 #div2 {transition-timing-function: ease;}
11 #div3 {transition-timing-function: ease-in;}
12 #div4 {transition-timing-function: ease-out;}
13 #div5 {transition-timing-function: ease-in-out;}

CSS3 Animations

The @keyframes Rule

1> animation

syntax

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

Example

1 div {
2     -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
3     animation: mymove 5s infinite;
4 } 

2> animation-name

• The animation-name property specifies a name for the @keyframes animation.

syntax

animation-name: keyframename|none|initial|inherit;

Example

 1 /* The animation code */
 2 @keyframes example {
 3     from {background-color: red;}
 4     to {background-color: yellow;}
 5 }
 6
 7 /* The element to apply the animation to */
 8 div {
 9     width: 100px;
10     height: 100px;
11     background-color: red;
12     animation-name: example;
13     animation-duration: 4s;
14 } 

3> animation-duration

4> animation-timing-function

5> animation-delay

6> animation-iteration-count

7> animation-direction

8> animation-fill-mode

9> animation-play-state