250+ TOP MCQs on Table Graphs, 2D Transforms, Boxing of Images & Constrained Images

Advanced CSS Questions 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

Answer: a
Clarification: 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

Answer: b
Clarification: 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

Answer: b
Clarification: 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

Answer: a
Clarification: 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

Answer: b
Clarification: 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

Answer: d
Clarification: 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()

 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()

 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()

 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()

 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()

Answer: b
Clarification: 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()

Answer: a
Clarification: 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.