<!DOCTYPE html> ?<html> ?<head> ?????<title></title> ?????<style type="text/css"> ?????????#a{ ?????????????-webkit-perspective:800; ?????????????-webkit-perspective-origin:50% 50%; ?????????????????????????????overflow: hidden; ?????????} ?????????#pagegroup{ ?????????????width: 400px; ?????????????height: 400px; ?????????????margin: 0 auto; ?????????????-webkit-transform-style:preserve-3d; ?????????????position: relative; ?????????} ?????????.page{ ?????????????width: 360px; ?????????????height: 360px; ?????????????padding: 20px; ?????????????background: #000; ?????????????color: #fff; ?????????????font-weight: bold; ?????????????font-size: 360px; ?????????????line-height: 360px; ?????????????text-align: center; ?????????????position: absolute; ?????????} ?????????#page1{ ?????????????-webkit-transform-origin:bottom; ?????????????-webkit-transition:-webkit-transform 1s linear; ?????????} ?????????#page2,#page3,#page4,#page5,#page6{ ?????????????-webkit-transform-origin:bottom; ?????????????-webkit-transition:-webkit-transform 1s linear; ?????????????-webkit-transform:rotateX(90deg); ?????????} ???????</style> ?</head> ?<body> ?<div id="a"> ?????<div id="pagegroup"> ?????????<div class="page" id="page1">1</div> ?????????<div class="page" id="page2">2</div> ?????????<div class="page" id="page3">3</div> ?????????<div class="page" id="page4">4</div> ?????????<div class="page" id="page5">5</div> ?????????<div class="page" id="page6">6</div> ?????</div> ?</div> ???<div id="op"> ?????<a href="javascript:next()">next </a> ?????<a href="javascript:perv()">perv</a> ?</div> ???<script type="text/javascript"> ?????var curIndex=1; ?????function next(){ ?????????if(curIndex==6){ ?????????????return; ?????????} ?????????var curPage=document.getElementById(‘page‘+curIndex); ?????????curPage.style.webkitTransform="rotateX(-90deg)"; ?????????curIndex++; ?????????var nextPage=document.getElementById(‘page‘+curIndex); ?????????nextPage.style.webkitTransform="rotateX(0deg)"; ???????} ?????function perv(){ ?????????if(curIndex==1){ ?????????????return; ?????????} ?????????var curPage=document.getElementById(‘page‘+curIndex); ?????????curPage.style.webkitTransform="rotateX(90deg)"; ?????????curIndex--; ?????????var nextPage=document.getElementById(‘page‘+curIndex); ?????????nextPage.style.webkitTransform="rotateX(0deg)"; ?????} ?</script> ?</body> ?</html> ?CSS之3D翻转效果
原文地址：http://www.cnblogs.com/chaofei/p/7706547.html