HTML and CSS Reference
In-Depth Information
Table 3. Angle equivalents
Degrees
Gradians
Radians
Turns
45deg
50grad
0.785rad
0.125turn
90deg
100grad
1.571rad
0.25turn
180deg
200grad
3.142rad
0.5turn
270deg
300grad
4.712rad
0.75turn
360deg
400grad
6.283rad
1turn
Angle units are mostly used in 2D and 3D transforms, though they do appear in a few
other places. Note that angle units are
not
used in HSL colors, where all hue angle values
are
always
degrees and thus do not use the
deg
unit!
Time and Frequency
In cases where a property needs to express a period of time, the value is represented as
<time>
and is a
<number>
followed by either
s
(seconds) or
ms
(milliseconds.) Time values
are most often used in transitions and animations, either to define durations or delays.
The following two declarations will have exactly the same result.
a[href] {transition-duration: 2.4s;}
a[href] {transition-duration: 2400ms;}
Time values are also used in aural CSS, again to define durations or delays, but support
for aural CSS is extremely limited as of this writing.
Another value type historically used in aural CSS is
<frequency>
, which is a
<number>
followed by either
Hz
(Hertz) or
kHz
(kiloHertz). As usual, the identifiers are case-in-
sensitive, so
Hz
and
hz
are equivalent. The following two declarations will have exactly
the same result:
h1 {pitch: 128hz;}
h1 {pitch: 0.128khz;}
Position
A
position value
is how you specify the placement of an origin image in a background
area, and is represented as
<position>
. Its syntactical structure is rather complicated:
[
[ left | center | right | top | bottom |
<percentage>
|
<length>
] |
[ left | center | right |
<percentage>
|
<length>
]
[ top | center | bottom |
<percentage>
|
<length>
] |
[ center | [ left | right ] [
<percentage>
|
<length>
]? ] &&
[ center | [ top | bottom ] [
<percentage>
|
<length>
]? ]
]
