CSS3 Interview Questions
1 .
What are CSS3 transitions ?
CSS3 transitions are the properties which lets change effect using CSS smoothly over specified duration. Multiple changes simultaneously are allowed within one section.
2 .
Explain the use of media queries in CSS3.!
Media queries are the latest web standard for crafting adaptable style sheets for tablets, Desktop, mobiles and iOS enabled devices. They are applied using height, width of the device, viewport, orientation and resolution. So any structure design can be altered for making design responsive.
3 .
How many CSS3 User Interfaces.!
CSS3 has introduced mainly Two types of user interface that has been described as follows:

1. resize : The resize is a such property of User Interface, by which you can resize your div layout on your browser. Three features of resize you can use 

i.   resize:both 
ii.  resize:vertical 
iii. resize:horizontal.

2. outline-offset : The outline-offset is such property of the CSS3 User Interface, which can be used to define the space between the element's border and its outline.
4 .
What is CSS3 3D Transforms ?
CSS3 3D transform feature you can perform basic transform manipulations such as move, rotate, scale and skew on elements in a three-dimensional space.

The following 3D transformation methods:

1. rotateX()
2. rotateY()
3. rotateZ()
5 .
Explain all the measurement units in CSS3?
% - Defines a measurement as a percentage relative to another value, typically an enclosing element.cm Defines a measurement in centimeters. div {margin-bottom: 2cm;}

em - A relative measurement for the height of a font in em spaces. Because an em unit is equivalent to the size of a given font, if you assign a font to 12pt, each "em" unit would be 12pt; thus, 2em would be 24pt.

ex - This value defines a measurement relative to a font's x-height. The x-height is determined by the height of the font's lowercase letter x.

in - Defines a measurement in inches.

mm - Defines a measurement in millimeters.

pc - Defines a measurement in picas. A pica is equivalent to 12 points; thus, there are 6 picas per inch.

pt - Defines a measurement in points. A point is defined as 1/72nd of an inch.

px - Defines a measurement in screen pixels.
6 .
What is CSS3 Flexbox?
The Flexible Box Module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities. 
 
An area of a document laid out using flexbox is called a flex container. To create a flex container, we set the value of the area's container's display property to flex or inline-flex. As soon as we do this the direct children of that container become flex items. As with all properties in CSS, some initial values are defined, so when creating a flex container all of the contained flex items will behave in the following way.
 
* Items display in a row (the flex-direction property's default is row).
* The items start from the start edge of the main axis.
* The items do not stretch on the main dimension but can shrink.
* The items will stretch to fill the size of the cross axis.
* The flex-basis property is set to auto.
* The flex-wrap property is set to nowrap.
7 .
How do you add shadow to elements in CSS3?
box-shadow: 10px 10px 5px grey; 
shadow-right: 10px;
shadow-bottom: 10px; 
shadow-color: grey; 
alpha-effect[shadow]: 10px 10px 5px grey;
8 .
How to resize a background image using CSS3?
background-size: 80px 60px; 
bg-dimensions: 80px 60px; 
background-proportion: 80px 60px; 
alpha-effect: bg-resize 80px 60px;
9 .
How to rotate objects using CSS3?
object-rotation: 30deg; 
transform: rotate(30deg); 
rotate-object: 30deg; 
transform: rotate-30deg-clockwise;
10 .
How to re-size/scale objects using CSS3?
transform: scale(2,4); 
scale-object: 2,4; 
scale: (2,4);