CSS翻转显示背面文字常见于网页右边固定栏
如下图。这里只是写了一个翻转效果。翻转效果会了像下图的网页固定栏自然也会写了
实例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS翻转显示背面</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
/* perspactive表示视距——元素距离视图的距离
像素越大离我们视野的距离就越远。可以做3D效果
*/
perspective: 600px;
}
/* 最外层样式 */
/* 解决相邻外边距margin何必的问题*/
.box::before{
content: '';
display: table;
}
.box{
position: relative;
width: 800px;
height: 500px;
box-shadow: 2px 2px 30px rgba(0, 0, 0, .5);
/* 这个盒子水平居中（margin:auto） */
margin: 50px auto;
transform-style: preserve-3d;
}
.box-imgA,
.box-imgB{
position: absolute;
top: 50%;
left: 50%;
width: 600px;
height: 400px;
margin-left: -300px;
margin-top: -200px;
/* transition是css3的过渡，配合transform转换效果使用，可以让transform不那么生硬 */
transition: all 2s linear;
/* 隐藏被旋转的 div 元素的背面 */
backface-visibility: hidden;
}
.box-imgA{
/* 定义沿 Y 轴的 3D 旋转。 */
transform: rotateY(0);
}
.box-imgB{
transform: rotateY(180deg);
}
.box:hover .box-imgA{
transform: rotateY(-180deg)
}
.box:hover .box-imgB{
transform: rotateY(0)
}
img{
width: 600px;
height: 400px;
}
span{
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
line-height: 100px;
font-size: 120px;
font-weight: bold;
color: #fff;
}
</style>
</head>
<body>
<div class="box">
<div class="box-imgA"><img src="img/A.jpg" alt=""><span>A</span></div>
<div class="box-imgB"><img src="img/B.jpeg" alt=""><span>B</span></div>
</div>
</body>
</html>
<script>
</script>
实例原理：
HTML部分：
- 首先定义一个大的容器(如div).用来设置相对定位，大的div内部嵌套两个小盒子(div)用来存放正面图片，背面图片以及正面文字，背面文字
- 如果是做成网页右侧固定栏，可以用ul li无须列表，然后每个li都设置相对定位，li里的内容部分绝对定位即可
CSS部分：
- 最外层设置相对定位，让其子元素的绝对定位相对于外层容器来定位
- 子元素设置绝对定位，可以使两张图片叠加在一起，然后第一张设置z-index提高层级可以盖在第二张图片下边
- 里边的文字用一个标签包裹起来，设置这个标签绝对定位，用定位的方式显示在图片的中间
- 设置第一张图片的y轴3D旋转角度为0，第二张图片的旋转角度为180°。最后用一个：hover伪类来让鼠标移动到图片上正面图片旋转-180°，背面图片旋转度数回归到0°。
翻转实现大概就这些，代码上注释也写得很清楚。有什么问题也欢迎留言
