CSS3 如何实现元素的3D旋转效果呢?


摘要:
下文讲述使用css3的相关属性实现元素3D旋转的方法分享,如下所示:

下文将通过举例的方式讲述:
当鼠标放在“DIV”对象上时,采用3D旋转的方式切换到另一个DIV上的方法分享,如下所示:

实现思路:
使用 CSS3 @keyframes 设置样式变化
使用 CSS3 transform属性 设置旋转角度
使用 CSS3 perspective属性 设置观察视角

   <!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫教程(www.maomao365.com)--鼠标指向则旋转</title>
<style type="text/css">
body, div, ul, li{
  padding:0;
  margin:0;
}
.container ul li{
  height:180px;
  width:180px;
  margin-right:20px;
  margin-bottom:20px;
  display:inline;
  -webkit-perspective:1000px;
  -moz-perspective:1000px;
  float:left;
}
.all_box{
  position:relative;
  height:180px;
  width:180px;
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
  -ms-transform-style:preserve-3d;
  transform-style:preserve-3d;
  -webkit-transition:0.5s;
  -moz-transition:0.5s;
  -o-transition:0.5s;
  -ms-transition:0.5s;
  transition:0.5s;
  -webkit-backface-visibility:hidden;
  -moz-backface-visibility:hidden;
  backface-visibility:hidden;
}
.all_box div{
  display:block;
  height:180px;
  width:180px;
  position:absolute;
  left:0;
  top:0;
  background:#060;
  text-align:center;
  -webkit-backface-visibility:hidden;
  -moz-backface-visibility:hidden;
  backface-visibility:hidden;
  color:#FFF;
  line-height:180px;
  font-size:16px;
}
.all_box .f_box {
z-index: 2;
}
.all_box .b_box {
z-index: 1;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.container ul li:hover .all_box{
  -webkit-transform:rotateY(180deg);
  -moz-transform:rotateY(180deg);
  transform:rotateY(180deg);
}
.container ul li:hover .b_box{
  z-index:3;
}
</style>
</head>
<body>
<div class="container">
  <ul>
    <li>
      <div class="all_box">
        <div class="f_box">猫猫教程--1</div>
        <div class="b_box">猫猫教程--2</div>
      </div>
    </li> 

  </ul>
</div>
</body>
</html> 
 
css div旋转举例

css div旋转举例