css中的backface-visibility属性怎么用

这篇文章给大家分享的是有关css中的backface-visibility属性怎么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

在成都网站设计、做网站过程中，需要针对客户的行业特点、产品特性、目标受众和市场情况进行定位分析，以确定网站的风格、色彩、版式、交互等方面的设计方向。成都创新互联还需要根据客户的需求进行功能模块的开发和设计，包括内容管理、前台展示、用户权限管理、数据统计和安全保护等功能。

CSS3backface-visibility属性

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

语法：

backface-visibility:visible|hidden;

visible：背面是可见的。

hidden：背面是不可见的。

注：只有InternetExplorer10+和Firefox支持backface-visibility属性；Opera15+、Safari和Chrome支持需使用-webkit-backface-visibility属性替代。

CSS3backface-visibility属性的使用示例

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<style>

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;

}

</style>

</head>

<body>

<p>本例有两个div元素，均旋转180度，背向用户。</p>

<p>第一个div元素的backface-visibility属性设置为"hidden"，所以应该是不可见的。</p>

<divid="div1">DIV1</div>

<p>第二个div元素的backface-visibility属性设置为"visible"，所以是可见的。</p>

<divid="div2">DIV2</div>

<p><b>注释：</b>本例只在InternetExplorer10、Firefox、Chrome以及Safari中有效。</p>

</body>

</html>

感谢各位的阅读！关于“css中的backface-visibility属性怎么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

文章名称：css中的backface-visibility属性怎么用
网页网址：https://www.cdcxhl.com/article18/pdgpgp.html

成都网站建设公司_创新互联，为您提供全网营销推广、面包屑导航、用户体验、网站收录、移动网站建设、云服务器

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

猜你还喜欢下面的内容