1.
2D and 3D Transformations
Flashcards
Q: What is the rotate function in CSS3?
A: It rotates an element by a set number of degrees.
Q: What does the perspective property do?
A: It activates space and enables 3D transformation by affecting the distance
between the z-plane and the user.
Key Points to Remember
2D transformations involve X and Y coordinates, while 3D transformations
add depth with the Z-axis.
Common 2D transformation methods include rotate(), translate(), scale(), and
skew().
3D transformations use methods like rotate3d(), scale3d(), and translate3d()
to manipulate elements in all three dimensions.
Key Terms and Definitions
rotate: Rotates an element by a specified angle.
translate: Moves an element to a specified location.
perspective: Creates depth by adjusting the distance of the z-plane from the
user.
Quiz Questions
1. Which CSS3 property allows for 3D transformations?
o A) transform
o B) perspective
o C) rotate3d
o D) All of the above
Answer: D) All of the above
2. What does the matrix function do?
o A) Rotates an element
o B) Combines transformations
o C) Skews an element
o D) Scales an element
Answer: B) Combines transformations
2. Transitions and Animations
Flashcards
Q: What does the transition-duration property specify?
A: It specifies the duration of the transition in seconds or milliseconds.
Q: What is the @keyframes rule used for?
A: To define animation styles for transitions.
Key Points to Remember
Transitions allow smooth changes between states (e.g., hover effects).
Animations use @keyframes to define multiple steps, allowing complex
effects.
Timing functions like ease, linear, and ease-in-out control the pace of
transitions.
Key Terms and Definitions
transition-property: Specifies which properties to transition.
@keyframes: Defines the intermediate steps for an animation.
Quiz Questions
1. Which property is used to delay a transition?
o A) transition-delay
o B) transition-duration
o C) transition-timing-function
o D) transition-property
Answer: A) transition-delay
2. What does the ease timing function do?
o A) Same speed
o B) Slow start, fast middle, slow end
o C) Fast start, slow end
o D) Slow start and end
Answer: B) Slow start, fast middle, slow end
3. Transparencies and Overlays
Flashcards
Q: What does the z-index property control?
A: The stacking order of elements on a web page.
Q: What value makes an element fully transparent?
A: An opacity value of 0.
Key Points to Remember
Overlays use z-index to determine stacking order.
The opacity property controls how transparent an element appears, ranging
from 0 (transparent) to 1 (opaque).
Key Terms and Definitions
z-index: Sets the stacking order of elements.
opacity: Defines the transparency level of an element.
Quiz Questions
1. Which property controls overlay stacking?
o A) opacity
o B) z-index
o C) visibility
o D) transform
Answer: B) z-index
2. What is the range for opacity values?
o A) 0-10
o B) 0-1
o C) 0-100
o D) 1-100
Answer: B) 0-1
4. Display Enhancements Summary
Flashcards
Q: What are the core features of CSS3 learned in this module?
A: 2D and 3D transformations, transitions, animations, transparencies, and
overlays.
Q: Why is CSS3 preferred for animations?
A: It eliminates the need for third-party plugins and improves performance.
Key Points to Remember
CSS3 integrates advanced design capabilities like animations, transitions, and
3D effects natively.
These features enhance accessibility and performance while reducing
reliance on plugins.
Key Terms and Definitions
2D Transformation: Alters elements using X and Y coordinates.
Animation: Uses keyframes to create motion effects.
Quiz Questions
1. What does CSS3 eliminate the need for?
o A) HTML
o B) Third-party plugins
o C) JavaScript
o D) Images
Answer: B) Third-party plugins
2. Which feature adds depth to transformations?
o A) 2D Transformations
o B) Z-axis
o C) Keyframes
o D) Opacity
Answer: B) Z-axis
