Firefox10的3D Transform

Firefox10的3D Transform
作者：Neoxone 发表时间： 2012年02月1号，星期三阅读：12,917 次

之前写了一篇CSS3的崛起——体验webkit的3D-Effect。
随着firefox10正式版发布，firefox也支持3D Transform了，所以补充一篇，将上篇中的代码移植过来，支持firefox。

这里先穿插介绍下firefox10的新特性，firefox10除了支持3D Transform，还提供了Fullscreen API，令人兴奋吧。另外firefox10成为Mozila首个“长期支持版本”(Extended Support Release，简称“ESR”)，这种当然是市场考虑啦，至于是什么用意和市场反响我们就不探讨了。

下面是演示demo，只支持firefox10。 chrome浏览器的用户可以参考上一篇。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>firefox10</title>
<style>
*{padding:0;margin:0;}
body { background-color:#deddcd;}
#movieposters { list-style:none; margin:100px;}
#movieposters li {float:left;
	-moz-perspective: 500px;
}
/* 图片3d变换效果 */
#movieposters li img { border:10px solid #fcfafa;-moz-box-shadow:0 3px 10px #888;
	-moz-transform: rotateY(30deg);
	-moz-transition-property: -moz-transform;
	-moz-transition-duration: 0.5s;
}
#movieposters li:hover img {-moz-transform: rotateY(0deg); }
/* 文字框3d变换效果 */
.movieinfo {border:10px solid #fcfafa; padding:0 10px; width:120px; height:100px; background-color:#deddcd; margin:-125px 0 0 55px; position:absolute;-moz-box-shadow:0 10px 20px #888;
	-moz-transform: translateZ(30px) rotateY(30deg);
	-moz-transition-property: -moz-transform, box-shadow, margin;
	-moz-transition-duration: 0.5s; }
#movieposters li:hover .movieinfo {-moz-box-shadow:0 5px 10px #888; margin:-105px 0 0 30px;
	-moz-transform: rotateY(0deg); }
.movieinfo h3 {color:#7a3f3a;font-family:Georgia; text-align:center; }
.movieinfo p {padding:10px 0;}
.movieinfo a { display:block; background:#7a3f3a; padding:3px 0; color:#eee; text-decoration:none; text-align:center; margin:0 auto;-moz-border-radius:5px; }
.movieinfo a:hover, .movieinfo a:focus { background-color:#6a191f; color:#fff; }
</style>
</head>
<body>
<ul id="movieposters">
	<li>
		<img src='http://www.cssass.com/blog/resource/avatar/avatar_m.jpg' width='200' />
		<div class="movieinfo">
			<h3>Avatar 2</h3>
			<p>You like a baby</p>
			<a href="http://www.cssass.com" title="I see you">More info</a>
		</div>
	</li>
	<li>
		<img src='http://www.cssass.com/blog/resource/avatar/avatar_m.jpg' width='200' />
		<div class="movieinfo">
			<h3>Avatar 2</h3>
			<p>You like a baby</p>
			<a href="http://www.cssass.com" title="I see you">More info</a>
		</div>
	</li>
	<li>
		<img src='http://www.cssass.com/blog/resource/avatar/avatar_m.jpg' width='200' />
		<div class="movieinfo">
			<h3>Avatar 2</h3>
			<p>You like a baby</p>
			<a href="http://www.cssass.com" title="I see you">More info</a>
		</div>
	</li>
</ul>
</body>
</html>

去除一些效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>firefox10</title>
<style>
*{padding:0;margin:0;list-style:none; }
body { background:#deddcd;margin:100px;}
#movieposters li {float:left;
	-moz-perspective: 500px;
}
#movieposters li img {
	-moz-transform: rotateY(30deg);
	-moz-transition-property: -moz-transform;
	-moz-transition-duration: 0.5s;
}
#movieposters li:hover img {
	-moz-transform: rotateY(0deg);
}
.movieinfo {
	position:absolute; width:120px; height:100px; background:#fff; margin:-125px 0 0 55px;
	-moz-transform: translateZ(30px) rotateY(30deg);
	-moz-transition-property: -moz-transform, margin;
	-moz-transition-duration: 0.5s;
}
#movieposters li:hover .movieinfo {
	margin:-105px 0 0 40px;
	-moz-transform: rotateY(0deg);
}
</style>
</head>
<body>
<ul id="movieposters">
	<li>
		<img src='http://www.cssass.com/blog/resource/avatar/avatar_m.jpg' width='200' />
		<div class="movieinfo">
			(未设置transform-style，默认为plat)
		</div>
	</li>
</ul>
</body>
</html>

使用preserve-3d，实现全方位3D

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>firefox10</title>
<style>
*{padding:0;margin:0;list-style:none; }
body { background:#deddcd;margin:100px;}
#movieposters{
	-moz-perspective: 1000px;
}
#movieposters li {float:left;
	-moz-animation: spin 10s infinite linear;
}
#movieposters li.first{
	-moz-transform-style: preserve-3d;
}
#movieposters li.second{
	-moz-transform-style: plat;
}
 @-moz-keyframes spin {
      from { -moz-transform: rotateY(0); }
      to   { -moz-transform: rotateY(360deg); }
    }
#movieposters li img {
	-moz-transform: rotateY(30deg);
	-moz-transition-property: -moz-transform;
	-moz-transition-duration: 0.5s;
}
#movieposters li:hover img {
	-moz-transform: rotateY(0deg);
}
.movieinfo {
	position:absolute; width:120px; height:100px; background:#fff; margin:-125px 0 0 55px;
	-moz-transform: translateZ(30px) rotateY(30deg);
	-moz-transition-property: -moz-transform, margin;
	-moz-transition-duration: 0.5s;
}
#movieposters li:hover .movieinfo {
	margin:-105px 0 0 40px;
	-moz-transform: rotateY(0deg);
}
</style>
</head>
<body>
<ul id="movieposters">
	<li class='first'>
		<img src='http://www.cssass.com/blog/resource/avatar/avatar_m.jpg' width='200' />
		<div class="movieinfo">
			Avatar 2 (preserve-3d)
		</div>
	</li>
	<li class='second'>
		<img src='http://www.cssass.com/blog/resource/avatar/avatar_m.jpg' width='200' />
		<div class="movieinfo">
			Avatar 2 (plat)
		</div>
	</li>
</ul>
</body>
</html>

最后说明一下firefox和webkit间使用的一点差别：
火狐10下的3D Transforms在设置perspective属性值时必须带单位px，webkit可以省略；
另外，webkit在用transition-property设置transform这个值时，可以不用前缀，而firefox需要写上-moz-transform;

标签： 3D, erspective, preserve-3d, transform

这篇文章发布于 2012年02月1号，星期三，11:48，归类于 CSS3。您可以跟踪这篇文章的评论通过 RSS 2.0 feed。您可以留下评论，或者从您的站点trackback。

CSSASSCSSASS

Firefox10的3D Transform
作者：Neoxone 发表时间： 2012年02月1号，星期三阅读：12,917 次

相关文章:

一条评论发表在“Firefox10的3D Transform”上

留下回复

Firefox10的3D Transform作者：Neoxone 发表时间： 2012年02月1号，星期三 阅读：12,917 次

相关文章:

一条评论 发表在“Firefox10的3D Transform”上

留下回复

Firefox10的3D Transform
作者：Neoxone 发表时间： 2012年02月1号，星期三阅读：12,917 次

一条评论发表在“Firefox10的3D Transform”上