首页 > Web开发 > 详细

css3学习--css3动画详解二(3d效果)

时间:2016-03-17 21:34:19      阅读:295      评论:0      收藏:0      [点我收藏+]

一.设置3D场景

perspective:800       //浏览器到物体的距离(像素)
perspective-origin:50% (x轴) 50% (y轴)    //视点的位置

transform-style: preserve-3d;

示例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	#experiment{
		 -webkit-perspective: 800;
		 -webkit-perspective-origin: 50% 50%;
		 -webkit-transform-style: -webkit-preserve-3d;
	}
	.block{
		width:500px;
		height:500px;
		text-align:center;
		line-height:450px;/*牢记居中用行高 */
		font-size:100px;
		background-color:burlywood;
		margin:100px auto;
		transform:rotatex(45deg);
		/*transform:rotatey(45deg);
		transform:rotatez(45deg);*/
	}
	</style>
</head>
<body>
	<div id="experiment">
		<div class="block">css3</div>
	</div>
</body>
</html>

  

技术分享

技术分享

 

css3学习--css3动画详解二(3d效果)

原文:http://www.cnblogs.com/jerry666/p/5289331.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!