CSS 3d折叠动画演示实例–很炫的效果

在访问一个国外的博客的时候看到一个css 弄的3d折叠动画的演示实例,看着是很炫的,演示把他的源代码copy来下看看了,觉得挺好的,可以在实际的应用使用。

这个效果实现的基本原理就是使用三个层,第一父元素定义3D状态,第二父元素将完全可视的代码包含在动画,第三个是显示的内容,html的基本格式就是

[cce_html]
<div id="container">
  <div class="parent1">
    <div class="parent2">
      <div class="parent3">
        <!-- Content goes here -->
      </div>
    </div>
  </div>
</div>
[/cce_html]
css的代码入下:
[cce_css]
/* Static state */
#container   { 
  width: 400px; 
  height: 400px; 
  position: relative; 
  border: 1px solid #ccc; 
}
.parent1   { 
  /* overall animation container */
  height: 0; 
  overflow: hidden;

  -webkit-transition-property: height;
  -webkit-transition-duration: 1s; 
  -webkit-perspective: 1000px; 
  -webkit-transform-style: preserve-3d; 

  -moz-transition-property:height; 
  -moz-transition-duration: 1s; 
  -moz-perspective: 1000px; 
  -moz-transform-style: preserve-3d; 

  -o-transition-property:height; 
  -o-transition-duration: 1s; 
  -o-perspective: 1000px; 
  -o-transform-style: preserve-3d; 

  transition-property: height;
  transition-duration: 1s;
  perspective: 1000px;
  transform-style: preserve-3d;
}
.parent2  { 
  /* full content during animation *can* go here */ 
}
.parent3  { 
  /* animated, "folded" block */
  height: 56px; 

  -webkit-transition-property: all; 
  -webkit-transition-duration: 1s;
  -webkit-transform: rotateX(-90deg);
  -webkit-transform-origin: top; 

  -moz-transition-property: all; 
  -moz-transition-duration: 1s;
  -moz-transform: rotateX(-90deg);
  -moz-transform-origin: top;

  -o-transition-property: all; 
  -o-transition-duration: 1s;
  -o-transform: rotateX(-90deg);
  -o-transform-origin: top; 

  transition-property: all; 
  transition-duration: 1s;
  transform: rotateX(-90deg);
  transform-origin: top; 
}

/* Hover states to trigger animations */
#container:hover .parent1  { height: 111px; }
#container:hover .parent3  { 
  -webkit-transform: rotateX(0deg); 
  -moz-transform: rotateX(0deg); 
  -o-transform: rotateX(0deg); 
  transform: rotateX(0deg); 
  height: 111px; 
}
[/cce_css]
parent1主要是设置3d翻转和透明的效果,在高度为0px的地方开始,parent3设置翻转的过度和自己翻转的变化,当鼠标滑动到parent1的时候,parent3就用动画的
形式往下移动直到达到设置的高度。
效果截图:
温馨提示。。。。在支持的浏览器中打开,chrome,火狐,ie9等等
演示地址:http://www.cangzhang.com/wp-content/uploads/2012/08/test3D.htm

				

共有 0 条评论

Top