CSSでページをペラペラさせてみる

ページが自動でペラペラしてくれます
![note.png](https://qiita-image-store.s3.amazonaws.com/0/111862/7994a140-aeef-1ee5-4269-dabbed15aabc.png)

```html:html
<div id="note">
	<div id="page1"><span>Fin.</span></div>
	<div id="page2"></div>
	<div id="page3"></div>
	<div id="page4"></div>
	<div id="page5"></div>
	<div id="page6"></div>
	<div id="page7"></div>
	<div id="page8"></div>
	<div id="page9"></div>
	<div id="page10"></div>
</div>
```

```css:css3
		#note{
			width: 600px;
			height: 400px;
			position: absolute;
			top: 25%;
			left: 25%;
		}
		div[id^='page']{
			width:300px;
			height: 400px;
			position: absolute;
			background-color: #fff;
			box-shadow: 1px 1px 2px #666;
			top: 0;
			left: 300px;
			transform-origin: 0% 50%;
		}
		#page10{
			animation: pera1 1.3s ease-out infinite;
		}
		#page9{
			animation: pera2 1.3s ease-out infinite;
		}
		#page8{
			animation: pera3 1.3s ease-out infinite;
		}
		#page7{
			animation: pera4 1.3s ease-out infinite;
		}
		#page6{
			animation: pera5 1.3s ease-out infinite;
		}
		#page5{
			animation: pera6 1.3s ease-out infinite;
		}
		#page4{
			animation: pera7 1.3s ease-out infinite;
		}
		#page3{
			animation: pera8 1.3s ease-out infinite;
		}
		#page2{
			animation: pera9 1.3s ease-out infinite;
		}
		#page1 span{
			padding-top: 160px;
			padding-left: 100px;
			text-align: center;
			font-size:60px;
			display: inline-block;
		}
		@keyframes pera1
		{
			0%{
				transform: rotateY(0deg);
				-webkit-transform: rotateY(0deg);
			}
			100%{
				-webkit-transform: rotateY(-180deg);
				-moz-transform: rotateY(-180deg);
				transform: rotateY(-180deg);
			}
		}
		@keyframes pera2
		{
			0%{
				transform: rotateY(0deg);
				-webkit-transform: rotateY(0deg);
			}
			10%{
				transform: rotateY(0deg);
				-webkit-transform: rotateY(0deg);
			}
			100%{
				-webkit-transform: rotateY(-180deg);
				-moz-transform: rotateY(-180deg);
				transform: rotateY(-180deg);
			}
		}
		@keyframes pera3
		{
			0%{
				transform: rotateY(0deg);
				-webkit-transform: rotateY(0deg);
			}
			20%{
				transform: rotateY(0deg);
				-webkit-transform: rotateY(0deg);
			}
			100%{
				-webkit-transform: rotateY(-180deg);
				-moz-transform: rotateY(-180deg);
				transform: rotateY(-180deg);
			}
		}
		@keyframes pera4
		{
			0%{
				transform: rotateY(0deg);
				-webkit-transform: rotateY(0deg);
			}
			30%{
				transform: rotateY(0deg);
				-webkit-transform: rotateY(0deg);
			}
			100%{
				-webkit-transform: rotateY(-180deg);
				-moz-transform: rotateY(-180deg);
				transform: rotateY(-180deg);
			}
		}
		@keyframes pera5
		{
			0%{
				transform: rotateY(0deg);
				-webkit-transform: rotateY(0deg);
			}
			40%{
				transform: rotateY(0deg);
				-webkit-transform: rotateY(0deg);
			}
			100%{
				-webkit-transform: rotateY(-180deg);
				-moz-transform: rotateY(-180deg);
				transform: rotateY(-180deg);
			}
		}
		@keyframes pera6
		{
			0%{
				transform: rotateY(0deg);
				-webkit-transform: rotateY(0deg);
			}
			50%{
				transform: rotateY(0deg);
				-webkit-transform: rotateY(0deg);
			}
			100%{
				-webkit-transform: rotateY(-180deg);
				-moz-transform: rotateY(-180deg);
				transform: rotateY(-180deg);
			}
		}
		@keyframes pera7
		{
			0%{
				transform: rotateY(0deg);
				-webkit-transform: rotateY(0deg);
			}
			60%{
				transform: rotateY(0deg);
				-webkit-transform: rotateY(0deg);
			}
			100%{
				-webkit-transform: rotateY(-180deg);
				-moz-transform: rotateY(-180deg);
				transform: rotateY(-180deg);
			}
		}
		@keyframes pera8
		{
			0%{
				transform: rotateY(0deg);
				-webkit-transform: rotateY(0deg);
			}
			70%{
				transform: rotateY(0deg);
				-webkit-transform: rotateY(0deg);
			}
			100%{
				-webkit-transform: rotateY(-180deg);
				-moz-transform: rotateY(-180deg);
				transform: rotateY(-180deg);
			}
		}
		@keyframes pera9
		{
			0%{
				transform: rotateY(0deg);
				-webkit-transform: rotateY(0deg);
			}
			80%{
				transform: rotateY(0deg);
				-webkit-transform: rotateY(0deg);
			}
			100%{
				-webkit-transform: rotateY(-180deg);
				-moz-transform: rotateY(-180deg);
				transform: rotateY(-180deg);
			}
		}
```