大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章给大家分享的是有关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属性的使用示例
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;
}
本例有两个div元素,均旋转180度,背向用户。
第一个div元素的backface-visibility属性设置为"hidden",所以应该是不可见的。
第二个div元素的backface-visibility属性设置为"visible",所以是可见的。
注释:本例只在InternetExplorer10、Firefox、Chrome以及Safari中有效。
感谢各位的阅读!关于“css中的backface-visibility属性怎么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!