[分享]css3折叠效果(3d效果)

CSS3折叠效果又被称作3D效果，它可以使你的网页在用户操作时呈现一种类似于折叠的动态效果，增强用户的体验感。下面我们将展示如何使用CS3实现这一效果。/ 对框架设置样式，让它旋转并改变透明度 / ....

CSS3折叠效果又被称作3D效果，它可以使你的网页在用户操作时呈现一种类似于折叠的动态效果，增强用户的体验感。下面我们将展示如何使用CS3实现这一效果。

/* 对框架设置样式，让它旋转并改变透明度 */  
.box {  
  width: 200px;  
  height: 200px;  
  margin: 50px auto;  
  position: relative;  
  transform-style: preserve-3d;  
  transition: all 1s ease-in-out;  
}  

/* 设置不同的面和旋转角度 */  

.front,  
.back {  
  position: absolute;  
  width: 200px;  
  height: 200px;  
  padding: 20px;  
  background: #f1c40f;  
  box-shadow: 0 0 25px rgba(0,0,0,0.3);  
  text-align: center;  
  line-height: 160px;  
} 

.back {  
  transform: translateZ(-100px) rotateY(180deg);  
}  

/* 定义鼠标悬停时的动画效果 */  

.box:hover {  
  transform: rotateY(180deg);  
  transition: all 1s ease-in-out;  
  opacity: 0.5;  
  cursor: pointer;  
} 

上述代码实现了一个带有折叠效果的盒子。每个盒子由两个面组成，前面和后面。当鼠标悬停时，盒子会旋转180度，底部变为前部，增强用户的体验感。需要注意的是，这一效果只在现代浏览器中支持，因此您需要确保在浏览器中使用CSS3支持，以获得更好的效果。