`
zhangyaochun
  • 浏览: 2575051 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

-webkit-transform-style

-webkit-transform-style 
阅读更多

-webkit-transform-style

 

            ------- 表示被嵌套的元素在3D空间采用何种渲染方式

 

 有两个值：

 

 

  • flat   默认   所有子节点元素均不再有3D效果
  • preserve-3d
    

扩展阅读：

 

http://www.webkit.org/blog-files/3d-transforms/transform-style.html

分享到：
| 网站优化之工具篇
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Shy-3D立体动态相册实现代码（源代码）

    -webkit-transform-style:preserve-3d; -webkit-transform:rotateX(13deg); -webkit-animation:move 5s linear infinite; } .minbox{ width:100px; height:100px; position: absolute; left:50px; top:30...

    CSS3实现网页平滑过渡效果

    -webkit-transform:rotate(-45deg) translateY(25%); -moz-transform:rotate(-45deg) translateY(25%); transform:rotate(-45deg) translateY(25%); font-family:"Raphaelicons"; text-shadow:1px 1px 1px rgba...

    利用Js+Css实现折纸动态导航效果实例

    -webkit-transform-style:preserve-3d只对子元素有作用，所以每个div都加。 实例源码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <...

    java关于字符串拼接的笔试题-miajabara14.github.io:miajabara14.github.io

    隆隆声{50%{-webkit-transform:translateY(-0.2em);transform:translateY(-0.2em)}}@keyframes 隆隆声{50 %{-webkit-transform:translateY(-0.2em);transform:translateY(-0.2em)}}@-webkit-keyframes 不寒而栗{50%{...

    纯css3显示隐藏一个div特效的具体实现

    复制代码代码如下: <!...head> [removed][removed] <... } .from-below, .from-below-to-below .effeckt-modal { -webkit-transform: translateX(100%); -ms-transform: scale(0.5); -o-transform: scale(0.5)

    HTML5立体圆环旋转动画.zip

    HTML5立体圆环旋转动画是一款基于HTML5的立体圆环旋转动画，该特效主要利用了CSS3的-webkit-transform-style属性，效果非常酷。

    基于css3的属性transition制作菜单导航效果

    本文实例讲述了基于css3的属性transition制作菜单导航效果。分享给大家供大家参考。...-webkit-transform-style: preserve-3d; （设置内嵌的元素在 3D 空间如何呈现：保留 3D ）。 运行效果截图如下： 在线

    CSS3制作翻转效果_动力节点Java学院整理

    CSS3制作的翻牌效果，就是鼠标移到元素上，感觉可以看到元素背后的信息。大家如果制作考验记忆力的连连看、扑克类的游戏神马的，甚至给女朋友写一些话语，放在使用该实例...b、-webkit-transform-style: preserve-3d

    CSS3打造百度贴吧的3D翻牌效果示例

    今天给大家带来一个CSS3制作的翻牌效果，就是鼠标移到元素上，感觉可以看到元素背后的信息。大家如果制作考验记忆力的连连看、扑克类的游戏神马的，甚至给女朋友写一些话语，放在...b、-webkit-transform-style: preser

    HTML5立体圆环旋转动画 HTML5 3D效果

    HTML5 3D动画效果非常多，我们在html5tricks上也分享过一些，比如3D HTML5 Logo动画，旋转效果非常...今天我们来看一款基于HTML5的立体圆环旋转动画，该特效主要利用了CSS3的-webkit-transform-style属性，效果非常酷。

    js实现3D图片展示效果

    点击左上角的按钮前后切换 效果图： 代码如下： <!doctype html> <html>...style>... list-style:none;... -webkit-transform-style:preserve-3d; perspective:800px; } ul li{ position

    logo扫光特效，网站logo扫光特效纯代码可调节速度 WordPress美化教程

    将以下代码加到你的网站css文件里面，随意，只要能引用的css就行了，wordpress用户加在style.css里面。 .site-title:before{/*这里第一句看原理解释*/content: ""; position: absolute; width: 150px; height...

    JS实现图片高斯模糊切换效果的焦点图实例

    焦点图相信对大家来说都不陌生，本文给大家分享的是一种图片高斯模糊切换效果的焦点图，下面话不多说了，来看看... -webkit-transform:scale(1); } 100% { opacity:.1; -webkit-transform:scale(3); } } body{

    HTML5 3D相册 精美 女朋友礼物

    list-style-type: none; position: relative; cursor: pointer; } .menu li { list-style: none; width: 100px; height: 40px; border-right-color: rgb(221, 221, 221); border-right-width: 1px; border-right-...

    grails-realestate:房地产管理系统（Grails 示例）

    style tyle="text/css"> pre.sourceCode { 背景：黑色； 填充：.5em； } .reveal h1 { /*background: -webkit-linear-gradient(#eee, #333); -webkit-background-clip：文本； -webkit-text-fill-color: 透明;*/ ...

    HTML5立体圆环旋转动画特效代码

    HTML5立体圆环旋转动画是一款基于HTML5的立体圆环旋转动画，该特效主要利用了CSS3的-webkit-transform-style属性，效果非常酷。

    css3-3d-transform:90行代码实现图片旋转木马3D效果

    Css3-3d-transform__实现图片旋转木马3D效果</ title > </ head > < style > # doc { height : 600 px ; position : relative; overflow : hidden; background-color : # ddd ; } # stage { ...

    SVG描边动画

    效果如下： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <...style>... -webkit-animation:fadeIn 2s ease-in forwards;... -ms-transform: translateY(-50%); -webkit-tr

    CSS3控制HTML元素动画效果

    1.对元素transform的控制 先上例子： 复制代码代码如下: <head> <style> .showbox{ float: left; margin:4em 1em; width:100px; height:60px; borer:2px solid green; background-color:#000; text-...

Magicbox
Global site tag (gtag.js) - Google Analytics