折叠式谷歌地图（仅限Webkit内核）
在网页设计中，创新的视觉效果总能吸引用户的眼球。今天，将探索一种独特的地图展示方式——折叠式谷歌地图。这种效果不仅美观，而且具有很高的互动性，能够为网站增添不少趣味性。接下来，将详细介绍这种折叠地图是如何实现的。
首先，需要了解实现这种效果的基本思路。在HTML结构中，有一个主容器
以下是实现这种效果的HTML代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Folding google maps</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="script.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<a href="/foldedmap/" id="prev">Click to toggle</a>
<p>Folded Google Maps (Webkit only)</p>
</header>
<div id="map_master"></div>
<div id="container">
<div id="mapContainer1" class="mapContainer odd first"></div>
<div id="mapContainer2" class="mapContainer even"></div>
<div id="mapContainer3" class="mapContainer odd"></div>
<div id="mapContainer4" class="mapContainer even"></div>
<div id="mapContainer5" class="mapContainer odd"></div>
<div id="mapContainer6" class="mapContainer even last"></div>
</div>
</body>
</html>
每个切片的宽度固定为160px，高度为400px。重要的是，它们的溢出部分是隐藏的。通过巧妙地设置边距，可以将切片移动到所需的位置，而由于溢出部分被隐藏，所以切片的剩余部分不会被看到。这是一个非常巧妙的设计。
以下是实现这种效果的CSS代码：
.mapContainer {
background: #fff;
float: left;
width: 160px;
height: 400px;
overflow: hidden;
border-top: 10px solid #fff;
border-bottom: 10px solid #fff;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
box-shadow: 0px 4px 0 #10335C;
}
接下来，需要使用Webkit的3D变换来实现这种效果。这是通过一个定时器函数实现的，每10毫秒执行一次，直到达到预设的值。
以下是实现这种效果的JavaScript代码：
function mapSync() {
var map_clone = $('#map_master').clone().css('opacity', 1).css('z-index', -1);
$('#mapContainer1').html(map_clone.clone().css('marginLeft', '-80px'));
$('#mapContainer2').html(map_clone.clone().css('marginLeft', '-240px'));
$('#mapContainer3').html(map_clone.clone().css('marginLeft', '-400px'));
$('#mapContainer4').html(map_clone.clone().css('marginLeft', '-560px'));
$('#mapContainer5').html(map_clone.clone().css('marginLeft', '-720px'));
$('#mapContainer6').html(map_clone.clone().css('marginLeft', '-880px'));
}
function applyTransforms() {
var prefixes = ['webkit', 'moz', 'ms', 'o', ''];
for (var i in prefixes) {
$('.odd').css(prefixes[i] + 'Transform', 'rotateX(' + this.rotateX + 'deg) rotateY(' + -this.rotateY + 'deg)');
$('.even').css(prefixes[i] + 'Transform', 'rotateX(' + this.rotateX + 'deg) rotateY(' + this.rotateY + 'deg)');
}
$('.mapContainer').css('marginLeft', -160 * (1 - Math.cos(this.rotateY / 360 * 2 * Math.PI)) + 'px');
}
function unfoldMap() {
if (this.rotateY > 20) {
this.rotateY -= 0.5;
this.rotateX += 0.1;
this.applyTransforms();
} else {
clearInterval(this.fold_out);
this.isOpen = true;
}
}
function foldMap() {
if (this.rotateY < 90) {
this.rotateY += 0.5;
this.rotateX -= 0.1;
this.applyTransforms();
} else {
clearInterval(this.fold_in);
this.isOpen = false;
}
}