How to use the backface-visibility attribute in css
This article is about how to use the backface-visibility attribute in css. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.
CSS3backface-visibility attribute
What it does: the backface-visibility attribute defines whether the element is visible when it is not facing the screen. This attribute is useful if you do not want to see the back of a rotated element.
Syntax:
Backface-visibility:visible | hidden
Visible: the back is visible.
Hidden: the back is invisible.
Note: only InternetExplorer10+ and Firefox support the backface-visibility attribute; Opera15+, Safari, and Chrome support need to be replaced with the-webkit-backface-visibility attribute.
An example of using the CSS3backface-visibility attribute
Div
{
Position:relative
Height:60px
Width:60px
Border:1pxsolid#000
Background-color:yellow
Transform:rotateY (180deg)
-webkit-transform:rotateY (180deg); / * ChromeandSafari*/
-moz-transform:rotateY (180deg); / * Firefox*/
}
# div1
{
-webkit-backface-visibility:hidden
-moz-backface-visibility:hidden
-ms-backface-visibility:hidden
}
# div2
{
-webkit-backface-visibility:visible
-moz-backface-visibility:visible
-ms-backface-visibility:visible
}
This example has two div elements, both rotated 180 degrees, facing back to the user.
The backface-visibility attribute of the first div element is set to "hidden", so it should be invisible.
DIV1
The backface-visibility attribute of the second div element is set to "visible", so it is visible.
DIV2
Note: this example is only valid in InternetExplorer10, Firefox, Chrome, and Safari.
Thank you for reading! This is the end of this article on "how to use the backface-visibility attribute in css". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!
