css3真的很强大 可以进行一个2d和3d 的效果通过tranform属性控制元素的移动，旋转，缩放，拉长或拉伸
2d
复合属性
matrix(n,n,n,n,n,n,n) 6个值改变 所有的变相本质都是局域矩阵完成的
改变变形的原点（集点）
transform-origin：x y z；
x取值 left center right length %
y取值 left center right length %
z轴取值 length
简单的用法eg：
transform:translate(x,y,z)//和transform的取值一样
transform:translate(x,y)//但是需要注意的是兼容性
transform:translate(x)//有时候需要加前缀
-weblit-transform:translate(x,y,z)谷歌
-ms-transform:translate(x,y,z)IE
-moz-transform:translate(x,y,z)火狐
-o-transform:translate(x,y,z)OpenGL
3d
其实和2d用法差不多只不过加一点属性让你看着有点3d效果
解释：这个呢其实是保存3d的效果如果你做一个旋转的正方体一个元素指定完不成 所以你旋转的时候不可能全部都一个一个设置3d 的效果所个最外层加上这个可以使其下面的所有元素都有3d效果
perspective景深 我一般都叫镜像映身
举个例子 你看近处的树和远处的树 就是这个效果 就好像你看电视一样一个远处的人和近处的人 就是视觉差异
eg一个简单的旋转正方体
`<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
{
padding:0;
margin:0;
}
ul li {
list-style:none;
width:300px;
height:300px;
position:absolute;
text-align: center;
font:600 36px/300px 微软雅黑;
}
.one{
position:relative;
margin: 200px auto;
width:300px;
height:300px;
transform-origin:50% 50% 150px;
/border:1px solid red;*/
transform-style:preserve-3d;
transition:all 40s;
/*overflow: hidden;*/
}
.one:hover{
transform:rotateX(3000deg) rotateY(3000deg) rotateZ(360deg);
}
ul li{
border-radius:50%;
}
li:nth-child(2){
background:red;
right:300px;
transform-origin:right;
transform:rotateY(90deg)
}
li:nth-child(3){
background:blue;
right:-300px;
transform-origin:left;
transform:rotateY(-90deg)
}
li:nth-child(4){
background:gray;
bottom:300px;
transform-origin:bottom;
transform:rotateX(-90deg)
}
li:nth-child(5){
background:blue;
bottom:-300px;
transform-origin:top;
transform:rotateX(90deg)
}
li:nth-child(1){
background:pink;
}
li:nth-child(6){
background:purple;
transform:translateZ(300px);
}
</style>
<body>
<div class="one">
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> </body> </html>
做法其实很简单 你拆过箱子吧 就是把拆过的箱子把它合起来
箱子6个面 拆开： 8个div 然后定位成被拆的箱子样式
然后呢在折成盒子：
6个div定位成被拆过的箱子样式
然后通过改变旋转的基点左，右，上，下在围着X或Y轴旋转
最后再来一个平移Z轴就哦了
