最简单的翻页效果实现。之前找了别人做好的代码看了一下,但是有点小复杂,虽然效果很好看,但是可能一开始看不太懂,所以做了个最简易版的。
简单易懂,css里面的注释的地方是我自己一开始走的弯路,所以建议看之前最好要先仔细学习下3D转换的各个属性。
直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
/* 这里不可以设置transform-style,且必须设置perspective */
/* -webkit-transform-style: preserve-3d;
transform-style: preserve-3d; */
/* 可3D转换的元素的父元素设置该属性,否则视角有问题 */
-webkit-perspective: 1800px;
perspective: 1800px;
}
input {
display: none;
}
.pages {
position: absolute;
right: 0;
width: 100px;
height: 200px;
text-align: center;
line-height: 200px;
color: #FFFFFF;
transform-origin: 0 50%;
/* 可3D转换的元素(不是父元素)必须设置这个,否则显示会有问题 */
-webkit-transform-style: preserve