css内容翻转
css实现内容翻转效果
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>css翻面</title>
<style type="text/css">
.box {
width: 300px;
height: 272px;
margin: 50px auto 0;
transform-style: preserve-3d;
position: relative;
}
.box .front {
width: 300px;
height: 272px;
text-align: center;
line-height: 272px;
position: absolute;
background-color: pink;
left: 0;
top: 0;
transform: perspective(800px) rotateY(0deg);
backface-visibility: hidden;
transition: all 1500ms ease;
}
.box .back_info {
width: 300px;
height: 272px;
text-align: center;
line-height: 272px;
background-color: blue;
position: absolute;
left: 0;
top: 0;
transform: rotateY(180deg);
backface-visibility: hidden;
transition: all 1500ms ease;
}
.box:hover .front {
transform: perspective(800px) rotateY(180deg);
}
.box:hover .back_info {
transform: perspective(800px) rotateY(0deg);
}
</style> </head>
<body>
<div class="box">
<div class="front">我是正面文字说明</div>
<div class="back_info">我是背面文字说明</div>
</div> </body>
</html>