CSS3 transform变换基本命令：
1、translate(x,y) 设置盒子位移
2、scale(x,y) 设置盒子缩放
3、rotate(deg) 设置盒子旋转
4、skew(x-angle,y-angle) 设置盒子斜切
5、perspective 设置透视距离
6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示
7、translateX、translateY、translateZ 设置三维移动
8、rotateX、rotateY、rotateZ 设置三维旋转
9、scaleX、scaleY、scaleZ 设置三维缩放
10、tranform-origin 设置变形的中心点
11、backface-visibility 设置盒子背面是否可见
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>翻面效果</title>
<style type="text/css">
.box{
width: 534px;
height:300px;
margin: 50px auto 0;
transform-style: preserve-3d;
position: relative;
}
.box .pic{
width: 534px;
height: 300px;
position: absolute;
background-color: cyan;
left: 0;
top: 0;
transform: perspective(800px) rotateX(0deg);
backface-visibility: hidden;
transition: all 500ms ease;
}
.box .back_info{
width: 534px;
height: 300px;
text-align:center;
line-height: 300px;
background-color: grey;
opacity: 0.5;
position: absolute;
left: 0;
top: 0;
transform: rotateX(180deg);
backface-visibility: hidden;
transition: all 500ms ease;
}
.box:hover .pic{
transform: perspective(800px) rotateX(180deg);
}
.box:hover .back_info{
transform: perspective(800px) rotateX(0deg);
}
</style>
</head>
<body>
<div class="box">
<div class='pic'><img src="img/f.jpg"></div>
<div class="back_info">背面文字说明</div>
</div>
</body>
</html>
效果图如下：
front.png
back.png
