This set of Advanced CSS Questions and Answers focuses on “Table Graphs, 2D Transforms, Boxing of Images & Constrained Images”.
1. What is the default value of object-fit?
a) fill
b) contain
c) none
d) cover
View Answer
Explanation: Object-fit has can be set with five values. When set to the value fill, it is the default value which stretches the image to fit the content box, regardless of its aspect-ratio, contain increases or decreases the size of the image to fill the box whilst preserving its aspect-ratio.
2. Which value will compare the difference between none and contain?
a) contain
b) scale-down
c) none
d) cover
View Answer
Explanation: When setting the value to scale-down the image will compare the difference between none and contain in order to find the smallest concrete object size when set to cover the image will fill the height and width of its box.
3. object-fit is not supported by _______
a) Chrome
b) IE
c) Opera
d) Firefox
View Answer
Explanation: In the desktop, object-fit is not supported by Internet Explorer but supported by chrome, opera, firefox, edge, safari. In mobiles or tablets iOS Safari, Opera Mobile, Opera Mini, Android, Android Chrome, Android Firefox support this.
4. Which of the following is a library for JavaScript?
a) PlotKit
b) List bar chart
c) Pie chart
d) Stacked bar graphs
View Answer
Explanation: PlotKit is a library for JavaScript that is an improved version of CanvasGraph. It lets us build various sorts of charts and graphs without a hitch. In list bar chart we style definition list and convert it into a timeline chart.
5. Which of the following will not use JavaScript?
a) Animated attacked bar graph
b) Pie chart
c) Animated Donut chart
d) Infographic charts
View Answer
Explanation: Pure CSS3 experimental charts do not use any JavaScript & zero image, but can be viewed in Webkit browsers. Animated Stacked Bar Graph use D3 chart and JavaScript, it is developed to mimic live data feed, and give an illusion of how to handle data on the backend.
6. Which of the following uses AngulaJS?
a) d3 linegraph
b) Animated Donut chart
c) Infographic charts
d) CSS 3D animated chart
View Answer
Explanation: 3D prisma are created with HTML and CSS3(D) transforms, shaded with CSS gradients, animated with CSS transitions. AngularJS is used to write up an updating dataset. The size and thickness of the animated donut chart can be easily edited via CSS, JavaScript will do the rest.
7. Which of the following moves an element from its current position?
a) rotate()
b) translate()
c) scale()
d) matrix()
View Answer
Explanation: The translate() method moves an element from its current position according to parameters given for X-axis and Y-axis,
div {-ms-transform: translate(12px, 100px); -webkit-transform: translate(12px, 100px); translate(12px, 100px);}
8. Which of the following will rotate an element clockwise or counter-clockwise?
a) rotate()
b) skewX()
c) skewY()
d) matrix()
View Answer
Explanation: The rotate() method rotates an element clockwise or counter-clockwise according to the given degree,
div {-ms-transform: rotate(12deg); /*IE*/ -webkit-transform: rotate(12deg); transform: rotate(12deg); }
9. Which of the following increases or decreases the size of element?
a) skewX()
b) matrix()
c) scale()
d) skewY()
View Answer
Explanation: The scale() method increases or decreases the size of an element according to the parameters given for width and height,
div {-ms-transform: scale(3,5); -webkit-transform: scale(3,5); transform: scale(3,5);}
10. What skews an element along X and Y-axis?
a) skew()
b) skewX()
c) skewY()
d) matrix()
View Answer
Explanation: The skew() method skews an element along X and Y-axis by the given angles,
div {-ms-transform: skew(10deg, 20deg); -webkit-transform: skew(10deg,20deg); transform: skew(10deg,20deg);}
11. What combines all the 2D transform methods into one?
a) skewX()
b) matrix()
c) skewY()
d) skew()
View Answer
Explanation: The matrix() method combines all 2D transform methods into one, the matrix() method takes six parameters, containing mathematic functions, that allows us to rotate, scale, move or skew the elements.
12. What does not affect the element itself?
a) perspective()
b) sacle()
c) matrix()
d) rotate()
View Answer
Explanation: perspective() does not affect the element itself, but affects the transforms of descendant element’s 3D transform, allowing them all to have a consistent depth perspective.
Sanfoundry Global Education & Learning Series – CSS.
To practice advanced questions and answers on all areas of CSS, here is complete set of 1000+ Multiple Choice Questions and Answers.
If you find a mistake in question / option / answer, kindly take a screenshot and email to [email protected]
- Apply for Computer Science Internship
- Check Computer Science Books
- Practice Computer Science MCQs
- Practice HTML MCQ
- Practice MCA MCQs
