css动画中，transform与transition动画常常可以设置3D动画，以下例子是3D旋转的具体代码，希望对大家有帮助。。。。。。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D几何体</title>
<style type="text/css">
.out {
width: 300px;
height: 300px;
margin: 100px auto;
position: relative;
/*perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。注释：perspective 属性只影响 3D 转换元素。*/
perspective: 1200px;
}
/*定义盒子包含框样式*/
.wrapper {
/*transform--style属性指定嵌套元素是怎样在三维空间中呈现。注意： 使用此属性必须先使用 transform 属性.*/
transform-style: preserve-3d;
}
/*定义六个面的公共样式*/
.wall {
background: rgba(255, 0, 0, 0.5);
border: 1px solid black;
font-size: 30px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
height: 200px;
line-height: 200px;
width: 200px;
position: absolute;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
/*定义每个面样式*/
.front {
transform: translateZ(100px);
}
.back {
transform: rotateX(180deg) translateZ(100px);
}
.left {
transform: rotateY(-90deg) translateZ(100px);
}
.right {
transform: rotateY(90deg) translateZ(100px);
}
.top {
transform: rotateX(90deg) translateZ(100px);
}
.bottom {
transform: rotateX(-90deg) translateZ(100px);
}
/*定义关键帧动画*/
@keyframes abc {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
/*鼠标移入后执行动画*/
.wrapper:hover {
animation: abc 3s linear infinite;
}
</style>
</head>
<body>
<div class="out">
<div class="wrapper">
<div class="wall front">front</div>
<div class="wall back">back</div>
<div class="wall left">left</div>
<div class="wall right">right</div>
<div class="wall top">top</div>
<div class="wall bottom">bottom</div>
</div>
</div>
</body>
</html>效果如下：
