CSS Interview Questions
1 .
What is CSS transform-origin Property?
The transform-origin property allows you to change the position of transformed elements. 2D transformations can change the x- and y-axis of an element. 3D transformations can also change the z-axis of an element.
 
Example :
 
div {
      transform: rotate(45deg);
      transform-origin: 20% 40%;
    }
2 .
What is CSS hanging-punctuation Property?
The hanging-punctuation property specifies whether a punctuation mark may be placed outside the line box at the start or at the end of a full line of text.
 
Example :
 
p {
   hanging-punctuation: first;
}
3 .
What is CSS counter-increment Property?
The counter-increment property increases or decreases the value of one or more CSS counters. The counter-increment property is usually used together with the counter-reset property and the content property.
 
Example :
 
body {
  /* Set “my-sec-counter” to 0 */
   counter-reset: my-sec-counter;
}

h2:before {
   /* Increment “my-sec-counter” by 1 */
   counter-increment: my-sec-counter;
   content: “Section ” counter(my-sec-counter) “. “;
 }
4 .
What is CSS backface-visibility Property?
The backface-visibility property defines whether or not the back face of an element should be visible when facing the user. The back face of an element is a mirror image of the front face being displayed. This property is useful when an element is rotated.
 
Example :
 
#div1 {
   backface-visibility: hidden;
}
#div2 {
   backface-visibility: visible;
}
5 .
What is CSS calc() function?
The calc() function performs a calculation to be used as the property value.
 
Example: 
 
#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% – 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
  text-align: center;
}
6 .
What is the cubic-bezier() function?
The cubic-bezier() function defines a Cubic Bezier curve.
 
Example :
 
div {
  width: 150px;
  height: 150px;
  background: blue;
  transition: width 2s;
  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}