Selected CSS3 Properties

545

Value

Description

Ex ample

translate

Moves an element up/down or left/right without changing the elements place in the flow
of the document.

transform :
translate( 10px,
10px );

translateX

Moves an element left or right without changing the elements place in the flow of the
document.

transformX :
translate( 10px);

translateY

Moves an element up or down without changing the elements place in the flow of the
document.

transformY :
translate( 10px);

rotate

Rotates an element around an axis. The rotation can be specified in degrees or using
other values like the turn keyword.

transform :
rotate(180deg)

scale

Scales an element without changing the elements place in the document. Scale is set as
a multiple of 1, so scale(2) tells the browser
to make the element twice as big.

transform : scale( 2 )

scaleX

Scales an element on its x axis without changing the elements place in the document.

transform : scale( 2 )

scaleY

Scales an element on its y axis without changing the elements place in the document.

transform : scale( 2 )

Basic support is as follows:

Value

IE

FF

Safari

Chrome

Opera

transform

9*/10

3.5*/16

3.1*

1*

10.5*/12.1

*Indicates support with browser prefix.

3D Transforms
The 3D Transforms module extends 2D Transforms with a perspective transform function.
#perspective {
top : 200px;
left : 200px;
position : absolute;
-webkit-transform : perspective(500px) rotateY(75deg);
-moz-transform : perspective(500px) rotateY(75deg);
-ie-transform : perspective(500px) rotateY(75deg);
transform : perspective(500px) rotateY(75deg);

546

Appendix CCSS Properties

width : 500px;
height : 100px;
background : #ccff00;
}

Basic support is as follows:

Value

IE

FF

Safari

Chrome

Opera

transform

10

10*/16

4*

12*

none

*Indicates support with browser prefix.

Animations
The Animations module enables you to assign an animation to an element. You do this by specifying
the properties to animate, the timing, and the units to change during the animation.
#animated {
position : absolute;
width : 100px;
height : 100px;
left:0px;
top:100px;
background: #ffcc00;
animation-name: scroll;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
@keyframes scroll {
to {
left:100%;
transform: rotate(180deg);
}
}

The @keyframes directive defines named states that define standard CSS properties to use as animation keyframes.
The following table lists the subproperties of the animation property.
Property

Description

animation-name

Defines the name of the @keyframes rule that defines the

animations keyframes.

animation-duration

Defines the length of time the animation should take to

run once.

Selected CSS3 Properties

547

animation-timing-function

Defines the transition of animations through keyframes using

keyword-based functions.

animation-iteration-count

Defines the number of times the animation should run.

animation-direction

Defines whether the animation should reverse direction during each iteration.

animation-play-state

Defines the play/pause state of the animation.

animation-delay'

Defines the animation delay.

animation-fill-mode

Defines how an animation should apply target styles.

Basic support is as follows:

Basic Support

IE

FF

Safari

Chrome

Opera

10

5*/16

4*

1*

12*/12.1

*Indicates support with browser prefix.

Transitions
The Transitions module defines a property to animate the transitions between pseudo-classes, for
example, when an element enters or leaves the :hover state.
#transition li{
font:16px arial, helvetica, sans-serif;
color:#fff;
padding:2px 10px;
width : 200px;
list-style-type : none;
height : 50px;
background-color : #06F;
-webkit-transition-property: background-color,width,height;
-moz-transition-property: background-color,width,height;
-o-transition-property: background-color,width,height;
transition-property: background-color,width,height;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: background-color 1s;
transition-duration: background-color 1s;
}
#transition li:hover {
background-color: #036;
width:225px;
height:60px;

548

Appendix CCSS Properties

-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
}

The following table lists the transition properties.

Value

Description

transition-property

Defines the property or properties to transition through.

transition-duration

Defines the length of time the transition should take to

run once.

transition-timing-function

Defines a keyword-based function used to shape

the transition.

transition-delay

Defines the transition delay.

Basic support is as follows:

Basic Support

IE

FF

Safari

Chrome

Opera

10

4*/16

3*

1*

11.6*/12.1

*Indicates support with browser prefix.

Lengths
Following are the unit measurements for lengths that can be used in CSS.

Absolute Lengths
Unit

IE

cm

in

mm

pc

pt

Lengths

Relative Lengths
Unit

IE

em

ex

px

CSS3 Relative Length Properties

IE

FF

Safari

Chrome

Opera

rem

3.6

6.0

11.6

vw

10

19

20

12.5

vh

10

19

20

12.5

549