css设置属性不可见
CSS | 背面可见性 (CSS | backface-visibility Property)
Kickstart:
启动：
Developing a web page can sometimes prove to be challenging as we deal with many elements and sometimes we are unaware of the properties to be implied for better functioning or editing. This kind of problem is faced by many professional web developers and much more by beginners. But as they say, if you have not learned anything different then have you learned at all?
开发网页有时会遇到挑战，因为我们处理许多元素，有时我们不知道要更好地运行或编辑所隐含的属性。 许多专业的Web开发人员都会面对这种问题，初学者还要面对更多的问题。 但是正如他们所说，如果您没有学到任何不同的东西，那么您是否学到了什么？
This section is about one such property with which you might not be aware and thus this article is to help you understand everything you need to know about that property. The name of the property is the backface-visibility property in CSS. Now the name might sound perplexing but do not be worried the section below is all about definition!
本节是关于您可能不了解的此类属性的，因此，本文旨在帮助您了解有关该属性的所有信息。 该属性的名称是CSS中的backface-visibility属性 。 现在，这个名称听起来有些困惑，但是请不要担心，以下部分仅涉及定义！
Definition:
定义：
Let us have a get-to-know of the property before we proceed further on to more details.
在进一步了解更多细节之前，让我们先了解一下该属性。
The backface of any element is a mirror image of the front face. The backface-visibility property in CSS is used to define if the backface of an element is visible to the user or not.
任何元素的背面都是正面的镜像。 CSS中的backface-visibility属性用于定义元素的背面是否对用户可见。
This property is useful when an element is rotated and decides if the user should see the back face of the element or not.
当旋转元素并决定用户是否应该看到元素的背面时，此属性很有用。
There are two values to this property,
此属性有两个值，
hidden
隐
visible
可见
Syntax:
句法：
Element{
Backface-visibility : visible|hidden|initial|inherit;
}
Let's discuss each property one by one,
让我们逐一讨论每个属性，
背面可见度：可见 (backface-visibility : visible)
Very simple to use and understand property, the name itself bears the definition. This value of the backface-visibility property is used to display the backface of an element to the user. It is also the default value for this property.
使用和理解属性非常简单，名称本身带有定义。 backface-visibility属性的此值用于向用户显示元素的背面。 它也是此属性的默认值。
Syntax:
句法：
Element{
backface-visibility : visible;
}
Example:
例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative;
height: 100px;
width: 100px;
background-color: yellow;
transform: rotateY(180deg);
}
div {
backface-visibility: visible;
}
</style>
</head>
<body>
<h1>The backface-visibility Property</h1>
<div>VISIBLE</div>
</body>
</html>
Output
输出量
In the above example, if you notice then you may see the order of the word visible is reversed, similar to what happens when we see a reflection of something in the mirror, therefore the mirror image that is the back face of the element div is visible to the user.
在上面的示例中，如果您注意到了，那么您可能会看到“ 可见 ”一词的顺序颠倒了，类似于我们在镜子中看到某物的反射时发生的情况，因此作为元素div背面的镜像是对用户可见。
背面可见度：隐藏 (backface-visibility : hidden)
You can remember this value as the vice versa of the Visible value as this value of the backface-visibility property is used to hide the backface of an element to the user.
您可以记住该值与Visible值相反，因为backface-visibility属性的此值用于向用户隐藏元素的背面。
Syntax:
句法：
Element{
backface-visibility : hidden;
}
Example:
例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative;
height: 100px;
width: 100px;
background-color: yellow;
transform: rotateY(180deg);
}
div {
backface-visibility: hidden;
}
</style>
</head>
<body>
<h1>The backface-visibility Property</h1>
<div>HIDDEN</div>
</body>
</html>
Output
输出量
In the above example, it is clearly understood that while the hidden value is enabled of the backface property then the mirror image will not be displayed to the user just the vice versa of the visible value as mentioned in the definition, thus the back face of the div element is hidden from the user and the element is not displayed.
在上面的示例中，可以清楚地了解到，虽然启用了背面属性的隐藏值，但镜像不会仅向用户显示该定义值中提到的可见值，反之亦然div元素对用户隐藏，并且不显示该元素。
翻译自: https://www.includehelp.com/code-snippets/the-backface-visibility-property-in-css.aspx
css设置属性不可见
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
