Introduction to CSS version 3 (CSS3) Flashcards

1
Q

CSS3 Transformations: transform

A

Applies a 2D or 3D transformation to an element

Transformations include rotating, moving, skewing, scaling and so forth

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

CSS3 Transformations: transform-origin

A

Allows you to change a transformed element’s position

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

CSS3 Transformations: transform-style

A

Specifies whether child elements will retain the parent element’s position in 3D space

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

CSS3 Transformations: perspective

A

Specifies the perspective from which a 3D child element is viewed by defining how far it is placed from view (in pixels)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

CSS3 Transformations: perspective-origin

A

Specifies the bottom position of a 3D element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

CSS3 Transformations: backface-visibility

A

Defines whether or not an element is visible when it is rotated to face away from the viewer

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

2D transformations: rotate(angle)

A

Rotates the element clockwise at the specified degree

Negative values rotate the element counter-clockwise

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

2D transformations: scale(x,y)

A

Increases or decreases the size of the element, based on specified parameters for width (x) and height (y)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

2D transformations: scaleX(n)

A

Changes the element’s width

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

2D transformations: scaleY(n)

A

Changes the element’s height

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

2D transformations: matrix(n,n,n,n,n,n)

A

Combines all of the 2D transform methods into one
Takes six parameters, containing mathematic functions, which enable the element to rotate, scale, move (translate) and skew

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

2D transformations: translate(x,y)

A

Moves the element from its current position, based on the specified parameters for the left (x) and top (y) position

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

2D transformations: translateX(n)

A

Moves the element along the X-axis (horizontally)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

2D transformations: translateY(n)

A

Moves the element along the Y-axis (vertically)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

2D transformations: skew(x-angle,y-angle)

A

Turns or skews the element to a specified angle, based on the specified parameters for the horizontal (x) and vertical (y) lines

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

2D transformations: skewX(angle)

A

Turns or skews the element to a specified angle along its X-axis

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

2D transformations: skewY(angle)

A

Turns or skews the element to a specified angle along its Y-axis

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

3D transformations: rotateX(angle)

A

Rotates the element around its X-axis at the specified degree

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

3D transformations: rotateY(angle)

A

Rotates the element around its Y-axis at the specified degree

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

3D transformations: rotateZ(angle)

A

Rotates the element around its Z-axis at the specified degree

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

3D transformations: rotate3d(x,y,z,angle)

A

Defines a 3D rotation by specifying the degree for rotation for all axes

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

3D transformations: scale3d(x,y,z)

A

Defines a 3D scale transformation

Increases or decreases the size of the element, based on specified parameters for width (x), height (y) and depth (z)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

3D transformations: scaleX(x)

A

Defines a 3D scale transformation by specifying a value for the X-axis

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

3D transformations: scaleY(y)

A

Defines a 3D scale transformation by specifying a value for the Y-axis

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

3D transformations: scaleZ(z)

A

Defines a 3D scale transformation by specifying a value for the Z-axis

26
Q

3D transformations: translate3d(x,y,z)

A

Defines a 3D translation
Moves the element from its current position
Uses specified parameters for positions on the X-axis, Y-axis and Z-axis

27
Q

3D transformations: translateX(x)

A

Defines a 3D translation

Uses only the value for the X-axis

28
Q

3D transformations: translateY(y)

A

Defines a 3D translation

Uses only the value for the Y-axis

29
Q

3D transformations: translateZ(z)

A

Defines a 3D translation

Uses only the value for the Z-axis

30
Q

3D transformations: matrix3d(n,n,n,n,n,n,n,n,n,n,n, n,n,n,n,n)

A

Defines a 3D transformation

Uses a 4x4 matrix of 16 values

31
Q

3D transformations: perspective(n)

A

Defines a perspective view for a 3D transformed element
Affects the distance between the Z-plane and the user
Smaller values bring the viewer closer from the Z-plane
Larger values produce a more subtle effect

32
Q

CSS3 Transitions: transition

A

Sets the four transition properties into a single property

33
Q

CSS3 Transitions: transition-property

A

Specifies the CSS property that the transition will affect

34
Q

CSS3 Transitions: transition-duration

A

Defines the amount of time that a transition takes

35
Q

CSS3 Transitions: transition-timing-function

A

Describes the speed of a transition

36
Q

CSS3 Transitions: transition-delay

A

Defines when the transition will begin

37
Q

CSS3 Animations: @keyframes

A

Defines the animation

38
Q

CSS3 Animations: animation

A

Shorthand property for all the animation properties, except animation-play-state

39
Q

CSS3 Animations: animation-name

A

Specifies the identifier for the @keyframes animation that binds it to a selector

40
Q

CSS3 Animations: animation-duration

A

Specifies how long the animation will take to complete one cycle

41
Q

CSS3 Animations: animation-timing-function

A

Specifies how an animation progresses over one cycle

42
Q

CSS3 Animations: animation-delay

A

Specifies when the animation will begin

43
Q

CSS3 Animations: animation-iteration-count

A

Specifies the number of times that the animation will play

44
Q

CSS3 Animations: animation-direction

A

Specifies whether to play the animation in reverse on alternate cycles

45
Q

CSS3 Animations: animation-play-state

A

Specifies whether the animation is running or paused

46
Q

CSS3 User Interfaces: appearance

A

Makes an element look like a standard user interface element, such as a button or window

47
Q

CSS3 User Interfaces: box-sizing

A

Forces specified elements fit an area in a certain way

48
Q

CSS3 User Interfaces: icon

A

Styles an element with an iconic equivalent

49
Q

CSS3 User Interfaces: nav-down

A

Specifies where the cursor will navigate to when the user presses the arrow-down key

50
Q

CSS3 User Interfaces: nav-index

A

Specifies the tabbing order for an element

51
Q

CSS3 User Interfaces: nav-left

A

Specifies where the cursor will navigate to when the user presses the arrow-left key

52
Q

CSS3 User Interfaces: nav-right

A

Specifies where the cursor will navigate to when the user presses the arrow-right key

53
Q

CSS3 User Interfaces: nav-up

A

Specifies where the cursor will navigate to when the user presses the arrow-up key

54
Q

CSS3 User Interfaces: outline-offset

A

Draws an outline beyond the border edge (i.e., offsets the outline) as specified

55
Q

CSS3 User Interfaces: resize

A

Specifies whether an element can be resized by the user and how it can be resized

56
Q

overlay

A

A CSS3 technique used to place an HTML element on top of another HTML element.

57
Q

RGBA

A

Specifies the RGB (Red, Green, Blue) colors of an element, with an additional value (Alpha) for defining the opacity. For example, background: rgba(215, 143, 112, 0.4).

58
Q

transform

A

A CSS3 effect that changes the shape, size and/or position of an element.

59
Q

transition

A

CSS3 effect that gradually changes an element from one style to another style.

60
Q

user interface

A

The interaction between a Web page and the person using it. Generally, but not always, accepts user commands and returns information.

61
Q

Z-axis

A

An axis used along with X and Y for specifying Cartesian coordinates in three dimensions, whereas only the X-axis and Y-axis are used for two-dimensional coordinates.