如何使用backface-visibility属性

如何使用backface-visibility属性？这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容，让我们一起来看看吧！

创新互联基于成都重庆香港及美国等地区分布式IDC机房数据中心构建的电信大带宽，联通大带宽，移动大带宽，多线BGP大带宽租用,是为众多客户提供专业服务器托管报价，主机托管价格性价比高，为金融证券行业绵阳机房托管，ai人工智能服务器托管提供bgp线路100M独享，G口带宽及机柜租用的专业成都idc公司。

backface-visibility属性是用于定义当元素不面向屏幕时是否可见；如果在旋转元素不希望看到其背面时，该属性很有用。

CSS3 backface-visibility属性

作用：backface-visibility 属性定义当元素不面向屏幕时是否可见。如果在旋转元素不希望看到其背面时，该属性很有用。

语法：

backface-visibility: visible|hidden;

visible：背面是可见的。

hidden：背面是不可见的。

注：只有 Internet Explorer 10+ 和 Firefox 支持 backface-visibility 属性；Opera 15+、Safari 和 Chrome 支持需使用-webkit-backface-visibility 属性替代。

CSS3 backface-visibility属性的使用示例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div
{
position:relative;
height:60px;
width:60px;
border:1px solid #000;
background-color:yellow;
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg); /* Chrome and Safari */
-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;
}
</style>
</head>
<body>
<p>本例有两个 div 元素，均旋转 180 度，背向用户。</p>
<p>第一个 div 元素的 backface-visibility 属性设置为 "hidden"，所以应该是不可见的。</p>
<div id="div1">DIV 1</div>
<p>第二个 div 元素的 backface-visibility 属性设置为 "visible"，所以是可见的。</p>
<div id="div2">DIV 2</div>
<p><b>注释：</b>本例只在 Internet Explorer 10、Firefox、Chrome 以及 Safari 中有效。</p>
</body>
</html>

效果图：

如何使用backface-visibility属性

感谢各位的阅读！看完上述内容，你们对如何使用backface-visibility属性大概了解了吗？希望文章内容对大家有所帮助。如果想了解更多相关文章内容，欢迎关注创新互联行业资讯频道。

文章题目：如何使用backface-visibility属性
文章地址：https://www.cdcxhl.com/article48/ggjcep.html

成都网站建设公司_创新互联，为您提供域名注册、网站排名、小程序开发、服务器托管、Google、品牌网站设计

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容