`
rayln
  • 浏览: 434249 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

3D效果的制作

 
阅读更多
例子:
<html> 
    <head> 
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>WebSoket Demo</title> 
        <style type="text/css">
		.frame {
			height: 600px;
			-webkit-transform-style: preserve-3d;
			/* -webkit-animation: spin 10s infinite; */
		}
		.frame > div {
			background-color:red;
			width: 400px;
			height: 400px;
		}
		
		.square-1 {
			-webkit-transform: translateY(400px) rotateY(120deg) rotateX(20deg);
		}
		</style> 
    </head> 
    <body onload="display();"> 
        <div class="frame" >
			<div class="square-1">
				<h3>CSS3新特性:</h3>
				<p>增加新的css特效, 比如阴影.</p>
				<p>增加新的css动画效果(可定义animation和duration)</p>
				<p>语音定义(opera支持)</p>
				<p>3D效果(真3D和伪3D)</p>
			</div>
		</div>

    </body> 
</html>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics