backface-visibility css tricks code example

Example 1: backface-visibility

/* visible */
backface-visibility: visible;
-webkit-backface-visibility: visible;
-moz-backface-visibility: visible;
-ms-backface-visibility: visible;

/* hidden */
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;

/* global */
backface-visibility: inherit;
-webkit-backface-visibility: inherit;
-moz-backface-visibility: inherit;
-ms-backface-visibility: inherit;

backface-visibility: initial;
-webkit-backface-visibility: initial;
-moz-backface-visibility: initial;
-ms-backface-visibility: initial;

backface-visibility: unset;
-webkit-backface-visibility: unset;
-moz-backface-visibility: unset;
-ms-backface-visibility: unset;

Example 2: backface-visibility: hidden;

backface-visibility: hidden;Instead of it being visible, you could hide it. .flip { transform: rotateY(180deg);