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
3D transformations: scaleZ(z)
Defines a 3D scale transformation by specifying a value for the Z-axis
3D transformations: translate3d(x,y,z)
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
3D transformations: translateX(x)
Defines a 3D translation
Uses only the value for the X-axis
3D transformations: translateY(y)
Defines a 3D translation
Uses only the value for the Y-axis
3D transformations: translateZ(z)
Defines a 3D translation
Uses only the value for the Z-axis
3D transformations: matrix3d(n,n,n,n,n,n,n,n,n,n,n, n,n,n,n,n)
Defines a 3D transformation
Uses a 4x4 matrix of 16 values
3D transformations: perspective(n)
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
CSS3 Transitions: transition
Sets the four transition properties into a single property
CSS3 Transitions: transition-property
Specifies the CSS property that the transition will affect
CSS3 Transitions: transition-duration
Defines the amount of time that a transition takes
CSS3 Transitions: transition-timing-function
Describes the speed of a transition
CSS3 Transitions: transition-delay
Defines when the transition will begin
CSS3 Animations: @keyframes
Defines the animation
CSS3 Animations: animation
Shorthand property for all the animation properties, except animation-play-state
CSS3 Animations: animation-name
Specifies the identifier for the @keyframes animation that binds it to a selector
CSS3 Animations: animation-duration
Specifies how long the animation will take to complete one cycle
CSS3 Animations: animation-timing-function
Specifies how an animation progresses over one cycle
CSS3 Animations: animation-delay
Specifies when the animation will begin
CSS3 Animations: animation-iteration-count
Specifies the number of times that the animation will play
CSS3 Animations: animation-direction
Specifies whether to play the animation in reverse on alternate cycles
CSS3 Animations: animation-play-state
Specifies whether the animation is running or paused
CSS3 User Interfaces: appearance
Makes an element look like a standard user interface element, such as a button or window
CSS3 User Interfaces: box-sizing
Forces specified elements fit an area in a certain way
CSS3 User Interfaces: icon
Styles an element with an iconic equivalent
CSS3 User Interfaces: nav-down
Specifies where the cursor will navigate to when the user presses the arrow-down key
CSS3 User Interfaces: nav-index
Specifies the tabbing order for an element
CSS3 User Interfaces: nav-left
Specifies where the cursor will navigate to when the user presses the arrow-left key
CSS3 User Interfaces: nav-right
Specifies where the cursor will navigate to when the user presses the arrow-right key
CSS3 User Interfaces: nav-up
Specifies where the cursor will navigate to when the user presses the arrow-up key
CSS3 User Interfaces: outline-offset
Draws an outline beyond the border edge (i.e., offsets the outline) as specified
CSS3 User Interfaces: resize
Specifies whether an element can be resized by the user and how it can be resized
overlay
A CSS3 technique used to place an HTML element on top of another HTML element.
RGBA
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).
transform
A CSS3 effect that changes the shape, size and/or position of an element.
transition
CSS3 effect that gradually changes an element from one style to another style.
user interface
The interaction between a Web page and the person using it. Generally, but not always, accepts user commands and returns information.
Z-axis
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.
