backface-visibility属性怎么用

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

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属性的使用示例

nbsp;html>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;}

本例有两个 div 元素,均旋转 180 度,背向用户。

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

DIV 1

第二个 div 元素的 backface-visibility 属性设置为 "visible",所以是可见的。

DIV 2

注释:本例只在 Internet Explorer 10、Firefox、Chrome 以及 Safari 中有效。

登录后复制

效果图:

1.jpg

以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。更多精彩内容大家可以关注【创想鸟】相关教程栏目!!!

以上就是backface-visibility属性怎么用的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2888808.html

(0)
上一篇 2025年3月10日 21:15:24
下一篇 2025年2月19日 04:05:22

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • perspective属性怎么用

    perspective属性是用来定义 3d 元素距视图的距离,以像素计;它允许你改变 3d 元素查看 3d 元素的视图。 CSS3  perspective属性 作用:perspective 属性定义 3D 元素距视图的距离,以像素计。该属…

    2025年3月10日
    200
  • perspective-origin属性怎么用

    perspective-origin属性用于定义 3d 元素所基于的 x 轴和 y 轴,它允许改变3d元素的底部位置。当为元素定义 perspective-origin 属性时,其子元素会获得透视效果,而不是元素本身。 CSS3  pers…

    2025年3月10日
    200
  • transform属性怎么使用

    transform属性用于向元素应用 2d 或 3d 转换;该属性允许我们对元素进行旋转、缩放、移动或倾斜。 CSS3  transform属性 作用:transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、…

    2025年3月10日
    200
  • transform-style属性怎么用

    transform-style属性用来指定嵌套元素是怎样在三维空间中呈现。当值为flat时,表示所有子元素在2d平面呈现;值为preserve-3d时,表示所有子元素在3d空间中呈现。 CSS3 transform-style属性 作用:t…

    2025年3月10日
    200
  • transform-origin属性怎么用

    transform-origin属性用于改变被转换元素的位置。在2d 转换元素中可以改变元素 x 和 y 轴的位置;3d 转换元素中还可以改变其 z 轴的位置。 CSS3  transform-origin属性 作用:transform-o…

    2025年3月10日
    200
  • word-break属性怎么用

    word-break属性用于指定非cjk(中日韩)脚本的断行规则,规定了自动换行的处理方法。通过使用 word-break 属性,可以让浏览器实现在任意位置的换行。 CSS3  word-break属性 作用:word-break 属性规定…

    2025年3月10日
    200
  • text-wrap属性怎么使用

    text-wrap属性是用来指定文本换行规则的;当值为normal表示只在允许的换行点进行换行,值为none表示不换行,值为unrestricted表示在任意两个字符间换行,值为suppress表示只在行中没有其他有效换行点时进行换行。 C…

    2025年3月10日
    200
  • text-overflow属性怎么用

    text-overflow属性用于指定当文本溢出包含它的元素时,应该发生的事情。 CSS3  text-overflow属性 作用:text-overflow 属性规定当文本溢出包含元素时发生的事情。 语法: text-overflow: …

    2025年3月10日
    200
  • text-outline属性怎么用

    text-outline属性是用于指定文本轮廓的,通过该属性可以设置轮廓的粗细、模糊半径、颜色。 CSS3  text-outline属性 作用:text-outline 属性规定文本轮廓。 语法: text-outline: thickn…

    2025年3月10日
    200
  • css3 text-justify属性怎么用

    text-justify属性用于指定当文本对齐属性text-align设置为”justify”时的齐行方法;该属性规定如何对齐行文本进行对齐和分隔。 CSS3  text-justify属性 text-justify…

    2025年3月10日
    200

发表回复

登录后才能评论