Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

咱也来玩玩CSS3的3D变换

  最近贴吧的首页上多了个CSS3的3D效果,貌似大家讨论的很火。咱也来玩玩这货吧~我看了下贴吧上的实现代码,多余的代码一大堆,导致很多人被它搞乱了。其实如果有3D基础的话这种东西看到效果就能想到实现方案了,最多也只需要去MDN查个CSS3的属性罢了。
  下面就是一个简单的例子,这里只做了webkit的兼容,如果要兼容Firefox需要把所有webkit前缀的属性都复制一份并换成moz前缀。另外,IE目前还支持3D变换,只能支持CSS3的平面变换。至少IE10还不支持,IE11我就没测试了。 <style>
body {background:#F6F6F6;}
.panel {
  width:300px;height:120px;border:1px solid #CCC;
  margin:100px auto;padding:1px;background:#EEE;
  box-shadow:0px 0px 8px #CCC;
}
/*作为3D空间的容器*/
.panel div {
  width:100%;height:100%;position:relative;
  -webkit-transform-style:preserve-3d; /*变换使用3D效果*/
  -webkit-transform:perspective(600px); /*视点到原点的距离*/
}
/*图片元素的通用设置*/
.panel img {
  width:100%;height:100%;
  position:absolute;left:0px;top:0px; /*绝对定位让图片重叠*/
  -webkit-transition:all 1s; /*设置过度效果为1秒*/
  -webkit-backface-visibility:hidden; /*设置背面为不可见*/
}
/*设置图片初始的yaw*/
.panel img:first-child {-webkit-transform:rotateY(-180deg);}
.panel img:last-child {-webkit-transform:rotateY(0deg);}
/*hover时修改图片的yaw*/
.panel:hover img:first-child {-webkit-transform:rotateY(0deg);}
.panel:hover img:last-child {-webkit-transform:rotateY(180deg);}
</style>
<div class="panel">
  <div>
    <img src="http://www.google.cn/images/srpr/logo3w.png" />
    <img src="http://www.baidu.com/img/bdlogo.gif" />
  </div>
</div>

  这个效果是hover的时候使一个容器内的元素做3D旋转,并设置1秒的补间(过度),体现出旋转的过程。hover是鼠标事件,所以需要一个容器来处理,代码中使用了.panel这个元素来处理hover。如果不用一个容器来处理hover,会因为元素在做3D变换时候位置的变换让鼠标无法保持在元素上。接着,还需要一个作为3D空间的容器,这个容器,也就是.panel里面的DIV。我们需要为它设置一些3D空间的基本属性。“-webkit-transform-style:preserve-3d;”这个属性是说明这个空间将使用3D变换,而不是默认的平面变换。后面的“-webkit-transform:perspective(600px);”属性是描述视点到原点的距离。
  然后是对图片元素的设置“-webkit-transition:all 1s;”表示对所有CSS的变化都使用一个过度效果,时间为1秒。“-webkit-backface-visibility:hidden;”表示元素在3D空间中背面是不可见的,也就是说这个属性设置成hidden时,对元素绕y轴旋转180度之后就看不见它了。如果它的值是visible,那么绕y轴旋转180度后元素会翻转显示出来。我们的效果显然不需要这个显示,因此设置为hidden。接着是设置图片元素初始的旋转角度和hover的旋转角度。这里要对第一个和最后一个图片元素做不同的设置。第一个图片元素让它默认的yaw(yaw就是绕y轴旋转)为-180度,hover之后变成0度。最后一个图片元素也是类似的设置,只不过yaw的值是0到180。这样两个元素一起就把360度的空间全占了,这样鼠标hover时在任意的时间点上都可以看到元素了。
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^