Web 3D即将到来

最新推荐文章于 2024-04-23 10:08:11 发布

hsany330

最新推荐文章于 2024-04-23 10:08:11 发布

阅读量703

点赞数

最近apple官网的html5演示中增加了3D效果的相册，这代表着safari5 成为了第一个用css3实现3D效果的浏览器，由此可见web3D时代已指日可待。

3D效果的相册

CSS3 3D Gallery

　　本文主要介绍 safari5（截至2010-08-07所有其他webkit内核浏览器均还不能支持3D效果）中实现3D效果的CSS3样式

　　1、-webkit-perspective （3D透视属性）

　　　　应用该属性可将平面图形转换为具有远景透视效果的3D图形，该属性只能使其孩子元素产生3D，不对自身节点内容产生影响。

　　　　代码实例　

代码:

<html>
<head>
<meta name="viewport" content="user-scalable=no, width=device-width"/>
<title>Setting?the?Perspective</title>
</head>
<body>
<div style="font-size: 200%; margin: 1em 1em; -webkit-perspective: 500;">
I have perspective.
<div style="height:6em;width:6em;text-align:center;background-color:yellow;-webkit-transform:rotateY(40deg);">
I'm 3D.
</div>
</div>
</body>
</html>

使用-webkit-perspective前后对比

　　2、-webkit-transform-style

　　　　该属性用以表示被嵌套的元素在3D空间采用何种渲染方式（flat 或 preserve-3d），如果使用了flat（默认），那么所有子节点元素均是不再有3D 效果

　　　　值得注意的是，如果你构建的3D节点树（3D tree）在其祖先节点（ancestor element）后面，有可能会无法显示出来，为了避免这种情况，请确保祖先节点的-webkit-transform-style?属性设置为 preserve-3d ，默认值是flat。

　　　　另外，那些overflow设置为hidden的节点也不能正常渲染3D效果，起将会按照flat的模式渲染。

　　　　代码实例

代码:

<div style="font-size:200%;margin:1em 1em;-webkit-perspective:500;">
<div style="height:8em;width:6em;text-align:center;background-color:yellow;-webkit-transform-style:preserve-3d;-webkit-transform: rotateY (40deg);">
I am the parent,and have perspective.
<div style="-webkit-transform:translateZ(3em);background-color:blue;">
I stand out from my parent element.
</div>
</div>
</div>