CSS Questions & Answers – Table Graphs, 2D Transforms, Boxing of Images & Constrained Images

CSS Multiple Choice Questions & Answers (MCQs) focuses on “Table Graphs, 2D Transforms, Boxing of Images & Constrained Images”.

Q 1. What is the default value of object-fit?
A. cover
B. contain
C. fill
D. none

Show Answer

Answer:-C. fill

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.

Q 2. Which value will compare the difference between none and contain?
A. contain
B. scale-down
C. none
D. cover

Show Answer

Answer:-B. scale-down

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.

Q 3. object-fit is not supported by _______
A. IE
B. Chrome
C. Opera
D. Firefox

Show Answer

Answer:-A. IE

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.

Q 4. Which of the following is a library for JavaScript?
A. PlotKit
B. List bar chart
C. Pie chart
D. Stacked bar graphs

Show Answer

Answer:-A. PlotKit

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.

Q 5. Which of the following will not use JavaScript?
A. Animated attacked bar graph
B. Animated Donut chart
C. Pie chart
D. Infographic charts

Show Answer

Answer:-C. Pie chart

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.

Q 6. Which of the following uses AngulaJS?
A. d3 linegraph
B. Animated Donut chart
C. Infographic charts
D. CSS 3D animated chart

Show Answer

Answer:-D. CSS 3D animated chart

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.

Q 7. Which of the following moves an element from its current position?
A. translate()
B. rotate()
C. scale()
D. matrix()

Show Answer

Answer:-A. translate()

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);}

Q 8. Which of the following will rotate an element clockwise or counter-clockwise?
A. matrix()
B. skewX()
C. skewY()
D. rotate()

Show Answer

Answer:-D. rotate()

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); }

Q 9. Which of the following increases or decreases the size of element?
A. skewX()
B. scale()
C. matrix()
D. skewY()

Show Answer

Answer:-B. scale()

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);}

Q 10. What skews an element along X and Y-axis?
A. skew()
B. skewX()
C. skewY()
D. matrix()

Show Answer

Answer:-A. skew()

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);}

Q 11. What combines all the 2D transform methods into one?
A. skewX()
B. matrix()
C. skewY()
D. skew()

Show Answer

Answer:-B. matrix()

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.

Q 12. What does not affect the element itself?
A. rotate()
B. sacle()
C. matrix()
D. perspective()

Show Answer

Answer:-D. perspective()

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.