-webkit-backface-visibility 属性
有两个值：
- initial 翻转之后上面的内容还是可见
- hidden 翻转之后上面的内部不可见
zhangyaochun
- 浏览: 2620777 次
- 性别:
- 来自: 北京
-
文章分类
- 全部博客 (1286)
- js-oop (2)
- js-window (10)
- js-event (19)
- js-string (37)
- js-array (27)
- js-page (4)
- js-dom (62)
- js-lang (8)
- js-number (7)
- js-platform (3)
- js-object (15)
- js-element (3)
- js-browser (7)
- js-url (6)
- js-date (10)
- css基础 (48)
- css优化 (15)
- html基础 (17)
- html标签 (19)
- js基础 (117)
- js-兼容性差异 (33)
- js引擎 (3)
- js性能 (14)
- json (6)
- jQuery源码浅析 (43)
- web mobile开发资料 (78)
- js跨域 (2)
- html5 (74)
- html5-canvas (7)
- css3 (53)
- 浏览器 (5)
- api设计学 (3)
- js-加载 (3)
- linux (37)
- 架构师 (1)
- php (2)
- self开发的脚本库--凤凰 (2)
- web应用名词 (6)
- javascript新特性翻译 (8)
- ajax (6)
- jQuery动画效果 (7)
- prototype的解读 (13)
- 优秀插件翻译 (1)
- css解决方案 (26)
- 数据库 (2)
- english daily (59)
- 浏览器内核探究 (1)
- jQuery插件介绍 (9)
- jquery基础篇 (26)
- chrome浏览器问题整理 (14)
- js选择器那些事 (3)
- 前端框架 (26)
- Firefox私有属性 (11)
- webkit私有属性集合 (17)
- 书籍推荐 (21)
- 数据结构 (1)
- 网站建设相关 (7)
- 好文翻译 (2)
- 个人作品 (3)
- kissy的解读 (4)
- css-layout（布局研究） (5)
- less研究 (1)
- YUI探究 (1)
- hash探究 (1)
- js动画 (7)
- 前端面试题 (37)
- css书写规范 (1)
- js模板引擎 (6)
- js模块化 (19)
- 编写高质量代码 (3)
- 性能探究--应用协议 (2)
- 前端图像处理 (19)
- Mac OS相关 (21)
- 正则表达式 (11)
- 离线应用相关 (0)
- 前端工具 (65)
- nodeJS (55)
- jquery优化篇 (2)
- 设计模式探究系列 (3)
- windows7 (2)
- IE10 (10)
- 微博开放平台探究 (2)
- 常用web服务接口 (1)
- 数据存储相关 (8)
- 零时文件 (2)
- jQuery Mobile (16)
- backbone (15)
- underscore (22)
- sass (11)
- android (3)
- phonegap (10)
- IE私有 (11)
- qwrap (8)
- git (14)
- chrome extensions (5)
- freemarker (11)
- angularJS (3)
- seo (2)
- markdown (3)
- css动画 (4)
- 安卓开发 (2)
- React (7)
- 活动页技术 (1)
- 网络安全 (3)
- grunt (7)
- Lo-Dash (3)
- 前端国际化 (4)
- 版本控制 (2)
- 盒模型 (4)
- 微信开发 (1)
- Mock数据工具 (1)
- sails (1)
- vim (1)
- js-color (1)
- iOS 基础 (43)
最新评论
-
jertom：
<div id="showInfo" ...
addEventListener等事件监听的参数细谈 -
乌托邦国王：
引用[u][/u]
css3动画属性系列之transform细讲移动translate -
hvang1988：
能提供附件下载吗，找不到js库，google封了访问不了
Syntaxhighlighter---代码高亮插件介绍 -
sscsacdsadcsd：
我的天 那到底是为什么function是object我看und ...
typeof func ==='function'的疑惑 -
wkjiangwk：
试了，没用，你们从不去测试。
介绍一下x-webkit-speech -------实现语音输入
分享到：
发表评论
-
webkitMatchesSelector
2013-04-22 11:22 0本文内容部分来自： ht ... -
-webkit-min-device-pixel-ratio的常见值对照
2013-03-01 15:58 19919前言： 本文来自于对 http: ... -
-webkit-cross-fade
2013-02-27 12:13 1499前言： 本文做个人学习积累用！ ... -
iOS如何禁用长按页面弹出菜单
2013-02-01 12:24 4734iOS如何禁止用户长按页面导致弹出菜单？ ... -
iOS禁止用户选中文字
2013-02-23 17:20 2211iOS如何禁止用户选中文字？ 给文字增加样 ... -
webkit的cursor新规则
2013-01-11 16:36 1488加入cursor两个新规则： -webkit- ... -
Chrome命令收集
2012-11-14 18:42 1703本文主要收集一些Chrome浏览器的命令： c ... -
css3之mask
2012-10-29 16:52 1902-webkit-mask-box-image 实例代 ... -
你认识-webkit-filter吗
2012-09-29 15:52 1692前言： 其实这个topic的谈起，还是某某大侠基于w ... -
-webkit-perspective属性
2012-09-08 21:19 3206-webkit-perspective属性 ... -
-webkit-transform-style
2012-09-08 21:02 2922-webkit-transform-style ... -
-webkit-text-stroke相关
2012-07-29 17:29 1491讲到这个，还是提一提text-stroke与text-fill ... -
谈谈-webkit-font-smoothing
2012-07-29 16:39 3897webkit内核的私有属性： -webkit-font-smo ... -
介绍一下x-webkit-speech -------实现语音输入
2012-05-08 19:14 4328其实大家都能从一淘啊或者淘宝相关的产品里面看到这样的输入框 ... -
-webkit-tap-highlight-color
2012-02-22 16:52 3691-webkit-tap-highlight-color ... -
WebKit特殊样式值
2012-02-07 11:21 1680最近一直在研究一些css的框架，遇到一些平时自己很少写的W ... -
chrome浏览器font-size<12px
2012-02-08 11:28 3732决定开辟一个新的分类----chrome浏览器下的问题整理 ...
相关推荐
`-webkit-transition`定义了元素属性变化时的过渡效果，`-webkit-backface-visibility`控制元素翻转时是否可见，`-webkit-box-reflect`则可以创建元素的镜像反射效果，`-webkit-mask-image`则允许使用图像或渐变作为...
- **-webkit-backface-visibility**：定义元素背面是否可见。 - **-webkit-box-reflect**：定义元素的反射效果。 - **-webkit-mask**：定义元素的遮罩。 - **-webkit-mask-attachment**：定义遮罩图像的固定方式。 ...
-webkit-backface-visibility:hidden; -webkit-transition:all 0.6s ease-in-out; -moz-transition:all 0.6s ease-in-out; transition:all 0.6s ease-in-out; } .st-panel{ background-color: #fff; overflow:...
4. **隐藏背面（Backface Visibility）**：为了让翻转过程中看不到另一面，我们设置`-webkit-backface-visibility`和`-moz-backface-visibility`为`hidden`。 ```css .display { -webkit-backface-visibility: ...
-webkit-backface-visibility: hidden;（设置进行转换的元素的背面在面对用户时是否可见：隐藏） -webkit-transform-style: preserve-3d; （设置内嵌的元素在 3D 空间如何呈现：保留 3D ）。 运行效果截图如下： ...
3D变换通过`transform-style`和`perspective`属性来创建立体感，而`backface-visibility`属性则用于处理翻转面的可见性。 1. `transform: rotateX()`: 控制元素沿着X轴旋转。 2. `transform: rotateY()`: 控制元素...
Accelerate.css 使用CSS强制启用硬件加速，以加快Web性能。 只需下载css文件并将其包含在您的项目中即可。 <link rel="stylesheet" type="text/css" href="accelerate.css...-webkit-backface-visibility: hidden;b
`-webkit-transition`属性设置了元素在变换和透明度改变时的过渡效果，`-webkit-backface-visibility: hidden;`是为了避免在3D变换过程中出现闪烁。 整个过程展示了如何利用HTML5的结构化标签和CSS3的动画特性，...
-webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-transform: perspective(1000px) rotateX(0deg); transform: perspective(1000px) rotateX(0deg); ...
`和`-webkit-backface-visibility: hidden;`（针对旧版Webkit浏览器）来实现。这两个属性告诉浏览器在不显示背面时进行优化，提升性能。 在JavaScript部分，我们可以监听鼠标的`mouseover`和`mouseout`事件，动态地...
`-webkit-backface-visibility` 属性用来控制元素翻转到背面时是否可见。通常在实现翻转效果时，我们会将其设置为`hidden`，以便在翻转过程中隐藏背面的内容，直到完全翻转过来才显示。 4. **旋转（transform）** ...
- 使用`backface-visibility: hidden;`来提高3D转换的性能。 #### 四、总结 通过上述分析我们可以看出，实现页面翻转效果主要是利用CSS中的`transform`属性，针对不同的浏览器提供相应的兼容性处理。同时，还需要...
`perspective`属性定义了观察3D变换的视点距离，`transform-style`和`backface-visibility`则控制子元素如何参与3D空间。 4. **自定义滚动条**：CSS允许开发者通过`::-webkit-scrollbar`和`::-webkit-scrollbar-...
-webkit-backface-visibility: hidden; /* Safari 和 Chrome */ backface-visibility: hidden; } .flip-card-front { background-color: #bbb; color: black; } .flip-card-back { background-color: #2980b9...
- `-webkit-backface-visibility`: 确定元素背面是否可见，`hidden`表示背面不可见。 - `-webkit-transform`: 用于对元素应用2D或3D转换，包括移动、旋转、倾斜等。例如`translateZ(-200px)`表示沿着z轴向视图内移动...
`和`backface-visibility: hidden;`属性，可以消除3D变换中的锯齿和闪烁现象，提高视觉效果。 最后，为了适应不同的设备和浏览器，我们需要对非触屏设备和不支持CSS3的浏览器提供备选方案，比如鼠标滚轮或箭头键...
总结，利用CSS3的`perspective`、`transform-style`、`backface-visibility`以及`transform`属性，我们可以创建出逼真的3D翻牌效果。这种技术不仅适用于百度贴吧的类似应用场景，还可以广泛应用于各种网页交互设计，...
最后，CSS3的3D转换还包括`transform-style`和`backface-visibility`属性，它们控制子元素如何在3D空间中呈现和隐藏背面，有助于优化性能和视觉效果。 总结来说，HTML5中的CSS3 3D转换是一个强大的工具，它扩展了...