css3怎么设置元素背面不可见


本文摘自PHP中文网,作者青灯夜游,侵删。

在css3中,可以利用backface-visibility属性,通过给元素添加“backface-visibility: hidden;”样式来设置背面不可见。backface-visibility属性可以设置当元素不面向屏幕时是否可见。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

CSS3 backface-visibility属性

backface-visibility 属性定义当元素背面向屏幕时是否可见。

如果在旋转元素不希望看到其背面时,该属性很有用。

语法

1

backface-visibility: visible|hidden;

属性值:

  • visible:背面是可见的。

  • hidden:背面是不可见的。

backface-visibility属性和3D transform效果相关,它用于决定当一个元素的背面面向用户的时候是否可见。例如下面图片展示的两个圆形元素,前面一个是正面,后面一个是背面。当它翻转到背面的时候,上面的文字应该是正面的镜像,这是默认的行为。

1.png

当使用backface-visibility: hidden;样式后,另一幅代表背面的图片来取代原来的背面

1.png

【推荐教程:CSS视频教程 】

浏览器兼容

所有的现代浏览器都支持backface-visibility属性。Chrome、Safari和Opera浏览器需要使用-webkit-的厂商前缀。IE10+的IE浏览器都支持该属性。

示例:旋转的甜甜圈

2.png

阅读剩余部分

相关阅读 >>

CSS3 @media怎么不起作用?是什么原因?

CSS3中text-shadow实现文字阴影效果(代码实例 )

CSS3中实现动画有哪两种方式

html5中dialog元素的详细讲解(代码示例)

CSS3中box-sizing属性的解析(附代码)

CSS3动画属性有哪些

CSS3倒影效果怎么实现

CSS3支持为网页添加多个背景图片吗

background-origin属性怎么用

浅谈CSS3 device-width和width之间的差异

更多相关阅读请进入《CSS3》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...