Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.