css3翻书如何实现 |css字体倍数

首先，大家需要了解一下翻书效果的实现原理，即在鼠标移动的过程中，通过改变元素的transform属性，实现元素的旋转以及3D效果。其次，大家需要将两页书分别设置为背面和正面。当大家翻页时，只需要将大家的动态遮罩层逐渐移除，就可以看到正面与背面的转换效果。

/*首先大家需要定义元素的左右两边阴影*/
.book {
box-shadow: inset 0px 0px 50px rgba(0,0,0,0.5);
position: relative;
width: 300px;
height: 200px;
margin: 100px auto;
}
.book:before,
.book:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 50%;
background: rgba(0,0,0,0.1);
z-index: 2;
}
.book:before {
left: 0;
transform-origin: left center;
transform: perspective(1500px) rotateY(-25deg);
box-shadow: 0px 0px 50px rgba(0,0,0,0.5);
}
.book:after {
right: 0;
transform-origin: right center;
transform: perspective(1500px) rotateY(25deg);
box-shadow: 0px 0px 50px rgba(0,0,0,0.5);
}

现在，大家已经成功地将两页书的背面和正面分别定义了出来。接着，大家需要给动态遮罩层做准备。首先，需要定义遮罩层的大小和背景颜色。在遮罩层中，大家很关键的一步就是将元素固定在一个平面上，这样才能实现后期的翻转效果。

.book .mask {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.9);
transition: transform .5s ease-out;
transform-style: preserve-3d;
}

现在大家已经将遮罩层定义好了，那么大家需要给遮罩层添加一些鼠标事件以及相关CSS，如下：

.book:hover .mask {
transform: rotateY(180deg);
}
.book .mask:before,
.book .mask:after {
content: '';
position: absolute;
top: 0px;
left: 0px;
width: 50%;
height: 100%;
background-color: rgba(255, 255, 255, 0.9);
transform: rotateY(180deg);
z-index: -1;
}
.book .mask:before {
transform-origin: right center;
transform: rotateY(-180deg);
}
.book .mask:after {
transform-origin: left center;
transform: rotateY(180deg);
}

现在，大家已经将翻书效果实现了。通过上面的代码，大家可以看到效果非常棒。大家只需要在需要应用翻书效果的元素上，设置相关的CSS，就可以实现视觉上非常具有冲击力的翻书效果。