<!DOCTYPE html><html lang="en"> ?<head> ???<meta charset="utf-8"> ???<meta http-equiv="X-UA-Compatible" content="IE=edge"> ???<meta name="viewport" content="width=device-width, initial-scale=1"> ???<title></title> ???<style> ?????.center-bg { ???????position: relative; ???????top: 100px; ???????left: 300px; ???????width: 500px; ???????height: 500px; ???????background-color: #ddd; ???????border: 1px solid #fff; ?????} ?????.left-corner { ???????position: absolute; ???????left: 0; ???????top: calc(100% - 100px); ???????width: 0; ???????height: 0; ???????border-bottom: 100px solid #999; ???????border-right: 100px solid transparent; ???????transform: rotate3d(1,1,0,0deg); ?????} ?????.right-corner { ???????position: absolute; ???????top: calc(100% - 100px); ???????left: calc(100% - 100px); ???????width: 0; ???????height: 0; ???????border-bottom: 100px solid #999; ???????border-left: 100px solid transparent; ?????} ?????@keyframes flipBook1 ?????????{ ???????????0% ??{ ???????????????????transform: rotate3d(1,1,0,0deg); ???????????????} ???????????100% { ???????????????????transform: rotate3d(1,1,0,90deg); ???????????} ???????} ?????.flip-animation-1 { ?????????????animation: flipBook1 2s forwards; ?????????????-moz-animation: flipBook1 2s forwards; /* Firefox */ ?????????????-webkit-animation: flipBook1 2s forwards; /* Safari and Chrome */ ?????????????-o-animation: flipBook1 2s forwards; /* Opera */ ?????????} ???</style> ?</head> ?<body> ???<div class="center-bg"> ?????<div class="content-area"> ???????<div> ?????????<div class="left-corner flip-animation-1"> ?????????</div> ???????</div> ???????<div> ?????????<div class="right-corner"> ?????????</div> ???????</div> ?????</div> ???</div> ?</body></html>css-翻页
原文地址：http://www.cnblogs.com/adouwt/p/7791671.html