NEW
Font size
WorksheetsMastering CSS: Flip Box and Layout Concepts
Total questions: 10
Worksheet time: 3mins
What CSS property is commonly used to create a flip box effect?
translate
transform
scale
rotate
What does the 'position: absolute' property do in relation to its parent element?
It stretches the element to fill its parent container.
It positions the element at a fixed location on the screen.
It positions the element relative to its nearest positioned ancestor.
It makes the element invisible to the layout.
How does 'transform: rotateY(180deg)' affect an element?
It changes the element's color.
It flips the element horizontally.
It rotates the element vertically.
It scales the element up.
What is the purpose of 'transform-style: preserve-3d'?
To enable 2D transformations only.
To maintain 3D positioning of child elements relative to a transformed parent.
To apply a shadow effect to the parent element.
To hide child elements from the parent.
What is the effect of 'backface-visibility: hidden' on a flipped element?
The back face will be visible and displayed.
The back face of the flipped element will be hidden and not visible.
The front face of the flipped element will be hidden.
The element will not be flipped at all.
What is the difference between a comma-separated selector and a descendant selector?
Descendant selectors can only select one element at a time.
Comma-separated selectors are used for styling only.
Comma-separated selectors select multiple elements, whereas descendant selectors select nested elements.
Comma-separated selectors only apply to classes.
What does the 'display: flex' property do in a CSS layout?
It sets the background color of the container to transparent.
It creates a flexible layout for child elements, allowing for easy alignment and distribution.
It makes all child elements stack vertically without any spacing.
It disables all CSS properties for child elements.
How does 'position: relative' affect nested elements?
All nested elements will inherit the 'position' property from their parent.
Nested elements with 'position: absolute' will be positioned relative to the nearest ancestor with 'position: relative'.
Nested elements with 'position: fixed' will be positioned relative to the viewport.
'Position: relative' has no effect on nested elements.
What is the main difference between 'grid-template-columns' and 'grid-template-rows'?
'grid-template-columns' defines grid areas; 'grid-template-rows' defines grid items.
'grid-template-columns' sets row sizes; 'grid-template-rows' sets column sizes.
'grid-template-columns' sets column sizes; 'grid-template-rows' sets row sizes.
'grid-template-columns' is used for spacing; 'grid-template-rows' is used for alignment.
How can you create a responsive flip box using CSS Grid?
Use only Flexbox for layout and ignore responsiveness.
Create a static layout without any transitions.
Use CSS Grid to create a grid layout, apply CSS transitions for flipping, and ensure responsiveness with relative units.
Apply JavaScript for flipping effects instead of CSS.
