CSS Interview Questions, Tutorialspoint

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