Css动画翻书效果三

这是一个翻书的过度动画果，来简单的理解一下吧。

			

		   
TANZHOUWEB
			 

			   No matter how hard the road ahead, as long as the direction is correct, no matter how rugged, it is closer to happiness than standing in the same plce.
				 	不管前方的路有多苦，只要走的方向正确，不管多么崎岖不平，都比战在原地更接近幸福。
				 	以上往来,css动画讲究的是方法,就要看你怎么样去运用这些方法,比如说css旋转效果.css上下跳动效果和图片里面的人物走动等等例子里面也有参考。
			 
				
		 
 
		 

	

首先打一个div在给他一 个类，然后里面在打一个div，之后在div里面打h2标签.p标签和span标签在里面随便写一些文字，然后在第二个div下面，在打一个div。

body{
			height: 100vh;
			background-color: #638303;
		}
		.box{
			position: relative;
			left: 50%;
			top: 50%;
			transform: translate( -50% ,-50%);
			width: 300px;
			height: 400px;
			perspective: 2000px;
			transition: all .5s ease;
			box-shadow: 0px 0px 30px rgba(0,0,0,.5);
		}
		.box:before{
			content: "";
			position: absolute;
			width: 100%;
			height: 3px;
			background-color: #475B02;
		}
		.box:hover{
			transform: translate(-50% ,-50%) rotate(-10deg);
		}
		.text{
			width: 300px;
			height: 400px;
			background-color: #fff;
			box-shadow: inset 300px 0px 50px rgba(0,0,0,.5);
			padding: 20px;
			box-sizing: border-box;/*内边距*/
			transition: all 2s ease;
		}
		 .box:hover .text{
			 	box-shadow: inset 10px 0px 50px rgba(0,0,0,.5);/*水平 垂直 模糊距离 背景颜色*/
		}
		.text p span{
	 		 display: block;
			 margin-top: 25px;
		}
		.box-box{
			position: absolute;
			top: 0px;
			left: 0px;
			width: 300px;
			height: 400px;
			background: url(images/未标题-1.png);
			transform-origin: left;
			transition: all 2s ease;
		}
		.box:hover .box-box{
			transform: rotateY(-135deg);
		 	color: #8F8F8F;
			
		}

写好了之后，就来写css样式，首先设置body的背景为绿色，高度的话可以省略不写，然后就来写第一个div的样式先设置他的宽度和高度在给他一个背景颜色，然后在定位他上下左右居中，在设置一个过渡的动画效果和他的盒子阴影阴影。下面就是写他的伪类让他倾斜-10橡数，其他的我就不说了。
（transform: rotateY(-135deg);意思是图形旋转的度数）。