当前位置: 代码迷 >> Web前端 >> 3D成效的制作
  详细解决方案

3D成效的制作

热度:332   发布时间:2012-09-04 14:19:30.0
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>
  相关解决方案