css3 backface-visibility属性笔记

原创 PHP笔记  2017-09-21 18:19  阅读 1,609 views 次

css中,backface-visibility属性用来设置当元素不面向屏幕时是否可见,经常用来在旋转元素的时候不显示背面。

css3 backface-visibility属性值

  • visible:背面可见;
  • hidden:背面不可见。

语法格式:

backface-visibility: visible / hidden;

实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css backface-visibility属性笔记</title>
<style>
div
{
position:relative;
height:100px;
width:100px;
background-color:blue;
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度, 转向远离用户的方向。<br/>第一个div元素backface-visibility属性设置为 "hidden",是看不见的。</p>
<div id="div1">第一个div</div>
<div id="div2">第二个div</div>
</body>
</html>

运行结果:

注意:属性只兼容 IE 10,、Firefox、 Chrome和Safari浏览器。

更多css属性——>css属性大全

本文地址:https://www.ggbiji.com/css-backface-visibility.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情