CSS3转换变换
1，translate（x，y）设置盒子位移
2，scale（x，y）设置盒子缩放
3，rotate（deg）设置盒子旋转
4，skew（x角度，y角度）设置盒子斜切
5，perspective设置透视距离
6，变换式扁平|保留-3d中设置盒子是否按三维空间显示
如图7所示，平移X，平移Y，translateZ设置三维移动
8，rotateX，旋转Y，rotateZ设置三维旋转
9，将scaleX，的scaleY，scaleZ设置三维缩放
10，变换分析-原点设置变形的中心点
11，backface-visibility设置盒子背面是否可见
举例:(翻面效果）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>翻面</title>
<style type="text/css">
.box{
width:300px;
height:272px;
margin:50px auto 0;
transform-style:preserve-3d;
position:relative;
}
.box .pic{
width:300px;
height:272px;
position:absolute;
background-color:cyan;
left:0;
top:0;
transform:perspective(800px) rotateY(0deg);
backface-visibility:hidden;
transition:all 500ms ease;
}
.box .back_info{
width:300px;
height:272px;
text-align:center;
line-height:272px;
background-color:gold;
position:absolute;
left:0;
top:0;
transform:rotateY(180deg);
backface-visibility:hidden;
transition:all 500ms ease;
}
.box:hover .pic{
transform:perspective(800px) rotateY(180deg);
}
.box:hover .back_info{
transform:perspective(800px) rotateY(0deg);
}
</style>
</head>
<body>
<div class="box">
<div class="pic"><img src="images/location_bg.jpg"></div>
<div class="back_info">背面文字说明</div>
</div>
</body>
</html>