Introduction to CSS version 3 (CSS3) Flashcards
CSS3 Transformations: transform
Applies a 2D or 3D transformation to an element
Transformations include rotating, moving, skewing, scaling and so forth
CSS3 Transformations: transform-origin
Allows you to change a transformed element’s position
CSS3 Transformations: transform-style
Specifies whether child elements will retain the parent element’s position in 3D space
CSS3 Transformations: perspective
Specifies the perspective from which a 3D child element is viewed by defining how far it is placed from view (in pixels)
CSS3 Transformations: perspective-origin
Specifies the bottom position of a 3D element
CSS3 Transformations: backface-visibility
Defines whether or not an element is visible when it is rotated to face away from the viewer
2D transformations: rotate(angle)
Rotates the element clockwise at the specified degree
Negative values rotate the element counter-clockwise
2D transformations: scale(x,y)
Increases or decreases the size of the element, based on specified parameters for width (x) and height (y)
2D transformations: scaleX(n)
Changes the element’s width
2D transformations: scaleY(n)
Changes the element’s height
2D transformations: matrix(n,n,n,n,n,n)
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
2D transformations: translate(x,y)
Moves the element from its current position, based on the specified parameters for the left (x) and top (y) position
2D transformations: translateX(n)
Moves the element along the X-axis (horizontally)
2D transformations: translateY(n)
Moves the element along the Y-axis (vertically)
2D transformations: skew(x-angle,y-angle)
Turns or skews the element to a specified angle, based on the specified parameters for the horizontal (x) and vertical (y) lines
2D transformations: skewX(angle)
Turns or skews the element to a specified angle along its X-axis
2D transformations: skewY(angle)
Turns or skews the element to a specified angle along its Y-axis
3D transformations: rotateX(angle)
Rotates the element around its X-axis at the specified degree
3D transformations: rotateY(angle)
Rotates the element around its Y-axis at the specified degree
3D transformations: rotateZ(angle)
Rotates the element around its Z-axis at the specified degree
3D transformations: rotate3d(x,y,z,angle)
Defines a 3D rotation by specifying the degree for rotation for all axes
3D transformations: scale3d(x,y,z)
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)
3D transformations: scaleX(x)
Defines a 3D scale transformation by specifying a value for the X-axis
3D transformations: scaleY(y)
Defines a 3D scale transformation by specifying a value for the Y-axis