21. What do you know about CSS3 2D Transforms?
Answer:
CSS3 2D Transforms is an effect that lets an element change shape, size and position. It allows you to rotate, translate, scale and skew elements.
Following are 2D transformation methods:
- translate() - moves an element from its current position according to the given X-axis and the Y-axis parameters.
- rotate() - rotates an element clockwise or counter-clockwise according to a given degree.
- Scale() - increases or decreases the size of an element according to the given width and height.
- SkewX() - skews an element along the X-axis by the given angle.
- SkewY() - skews an element along the Y-axis by the given angle.
- skew() - kews an element along the X and Y-axis by the given angles.
- Matrix() - combines all the 2D transform methods into one.
Example:
div
{
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}
22. What do you know about CSS3 3D Transforms?
Answer:
CSS3 allows you to format your elements using 3D transformation. You can move elements to x-axis, y-axis and z-axis using 3D transforms.
following are the important 3D transformation methods:
- rotateX() - rotates an element around its X-axis at a given degree.
- rotateY() - rotates an element around its Y-axis at a given degree.
- rotateZ() - rotates an element around its Z-axis at a given degree.
Example:
div
{
-webkit-transform: rotateX(150deg); /* Safari */
transform: rotateX(150deg);
}
23. What is the purpose of Transitions property in CSS3?
Answer:
Transitions in CSS3 allows you to change property values from one value to another, over a given duration.
For creating a transitions effect, you need to specify two things: first thing is the CSS property that you want to add an effect to and second this is duration of the effect.
In CSS3, the transition property is a shorthand property for the four transition properties: transition-property, transition-duration, transition-timing-function, and transition-delay.
The transition-delay property specifies when the transition effect will start.
The transition-duration property specifies how many seconds (s) or milliseconds (ms) a transition effect takes to complete.
The transition-property property specifies the name of the CSS property the transition effect is for.
The transition-timing-function property specifies the speed curve of the transition effect.
Always specify the transition-duration property, otherwise the duration is 0, and the transition will have no effect.
24. What is RWD?
Answer:
RWD stands for Responsive Web Design. It is a technique in which designed pages are perfectly display on every screen size and device.
When you use CSS3 and HTML5 to resize, hide, shrink, enlarge, or move the content to make it look good on any screen it is called responsive web design.
It makes your web page look good on all devices.
25. Which property is use to make particular section rotate for certain degrees?
Answer:
The 'transform' property is used to make particular section rotate for certain degrees.
For example: 'transform' as 'rotate(45 deg)', this will make your section looks like a diagonal one.
The transform property is used to apply a 2D or 3D transformation to an element.
This property allows you to rotate, scale, move and skew the elements.
