Introduction to CSS version 3 (CSS3)

Question 1

CSS3 Transformations: transform

Answer 1

Applies a 2D or 3D transformation to an element

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

Question 2

CSS3 Transformations: transform-origin

Answer 2

Allows you to change a transformed element’s position

Question 3

CSS3 Transformations: transform-style

Answer 3

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

Question 4

CSS3 Transformations: perspective

Answer 4

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

Question 5

CSS3 Transformations: perspective-origin

Answer 5

Specifies the bottom position of a 3D element

Question 6

CSS3 Transformations: backface-visibility

Answer 6

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

Question 7

2D transformations: rotate(angle)

Answer 7

Rotates the element clockwise at the specified degree

Negative values rotate the element counter-clockwise

Question 8

2D transformations: scale(x,y)

Answer 8

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

Question 9

2D transformations: scaleX(n)

Answer 9

Changes the element’s width

Question 10

2D transformations: scaleY(n)

Answer 10

Changes the element’s height

Question 11

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

Answer 11

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

Question 12

2D transformations: translate(x,y)

Answer 12

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

Question 13

2D transformations: translateX(n)

Answer 13

Moves the element along the X-axis (horizontally)

Question 14

2D transformations: translateY(n)

Answer 14

Moves the element along the Y-axis (vertically)

Question 15

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

Answer 15

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

Question 16

2D transformations: skewX(angle)

Answer 16

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

Question 17

2D transformations: skewY(angle)

Answer 17

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

Question 18

3D transformations: rotateX(angle)

Answer 18

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

Question 19

3D transformations: rotateY(angle)

Answer 19

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

Question 20

3D transformations: rotateZ(angle)

Answer 20

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

Question 21

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

Answer 21

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

Question 22

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

Answer 22

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)

Question 23

3D transformations: scaleX(x)

Answer 23

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

Question 24

3D transformations: scaleY(y)

Answer 24

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

Question 25

3D transformations: scaleZ(z)

Answer 25

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

Question 26

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

Answer 26

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

Question 27

3D transformations: translateX(x)

Answer 27

Defines a 3D translation | Uses only the value for the X-axis

Question 28

3D transformations: translateY(y)

Answer 28

Defines a 3D translation | Uses only the value for the Y-axis

Question 29

3D transformations: translateZ(z)

Answer 29

Defines a 3D translation | Uses only the value for the Z-axis

Question 30

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

Answer 30

Defines a 3D transformation | Uses a 4x4 matrix of 16 values

Question 31

3D transformations: perspective(n)

Answer 31

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

Question 32

CSS3 Transitions: transition

Answer 32

Sets the four transition properties into a single property

Question 33

CSS3 Transitions: transition-property

Answer 33

Specifies the CSS property that the transition will affect

Question 34

CSS3 Transitions: transition-duration

Answer 34

Defines the amount of time that a transition takes

Question 35

CSS3 Transitions: transition-timing-function

Answer 35

Describes the speed of a transition

Question 36

CSS3 Transitions: transition-delay

Answer 36

Defines when the transition will begin

Question 37

CSS3 Animations: @keyframes

Answer 37

Defines the animation

Question 38

CSS3 Animations: animation

Answer 38

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

Question 39

CSS3 Animations: animation-name

Answer 39

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

Question 40

CSS3 Animations: animation-duration

Answer 40

Specifies how long the animation will take to complete one cycle

Question 41

CSS3 Animations: animation-timing-function

Answer 41

Specifies how an animation progresses over one cycle

Question 42

CSS3 Animations: animation-delay

Answer 42

Specifies when the animation will begin

Question 43

CSS3 Animations: animation-iteration-count

Answer 43

Specifies the number of times that the animation will play

Question 44

CSS3 Animations: animation-direction

Answer 44

Specifies whether to play the animation in reverse on alternate cycles

Question 45

CSS3 Animations: animation-play-state

Answer 45

Specifies whether the animation is running or paused

Question 46

CSS3 User Interfaces: appearance

Answer 46

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

Question 47

CSS3 User Interfaces: box-sizing

Answer 47

Forces specified elements fit an area in a certain way

Question 48

CSS3 User Interfaces: icon

Answer 48

Styles an element with an iconic equivalent

Question 49

CSS3 User Interfaces: nav-down

Answer 49

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

Question 50

CSS3 User Interfaces: nav-index

Answer 50

Specifies the tabbing order for an element

Question 51

CSS3 User Interfaces: nav-left

Answer 51

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

Question 52

CSS3 User Interfaces: nav-right

Answer 52

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

Question 53

CSS3 User Interfaces: nav-up

Answer 53

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

Question 54

CSS3 User Interfaces: outline-offset

Answer 54

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

Question 55

CSS3 User Interfaces: resize

Answer 55

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

Question 56

overlay

Answer 56

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

Question 57

RGBA

Answer 57

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).

Question 58

transform

Answer 58

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

Question 59

transition

Answer 59

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

Question 60

user interface

Answer 60

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

Question 61

Z-axis

Answer 61

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.